Cypress, 실제 사용 환경에 가까운 테스트

 

Cypress

• Cypress는 Jest가 아닌 mocha를 사용한다.
• 웹 애플리케이션을 테스트하기 위한 JavaScript 기반의 엔드투엔드(E2E) 테스팅 프레임워크이다.
• 컴퓨터에 설치되는 데스크톱 응용 프로그램으로 브라우저에서 실행되는 모든 것에 대한 빠르고 쉽고 안정적인 테스트를 도와준다.
• 브라우저에서 사용자의 동작을 흉내 내어 실제 사용 환경에 가까운 테스트를 할 수 있게 해준다.
• https://www.cypress.io/

 

 

설치

npm install cypress

다운로드하는데 시간이 약간 길 수 있음

 

 

프레임워크 열기

npx cypress open

• 반드시 [name].cy.ts 의 형태를 준수
• cypress open 해서 테스트 파일을 읽어 올 수 있다.

 

 

cypress를 typescript로 구성하기

// cypress/tsconfig.json
 
{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "../node_modules",
        "types": [
            "cypress"
        ],
        "outDir": "#"
    },
    "include": [
        "./**/*.*"
    ]
}

cypress 안의 타입스크립트 구성은 react application의 타입스크립트 구성과 다르다.

 

테스트할 기본 URL을 설정하는 옵션

// cypress.config.ts 
 
import { defineConfig } from "cypress";
 
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "http://localhost:3000" // 기본 URL
  }
});