Cypress는 웹 애플리케이션을 위한 end-to-end 테스트를 위한 오픈 소스 테스트 도구입니다. Cypress를 사용하면 사용자의 관점에서 웹 애플리케이션을 테스트할 수 있습니다. 이 툴은 내장된 디버깅 기능과 시간 여행 디버깅 기능을 제공하여 빠르고 효과적인 테스트를 가능하게 합니다.

이제 TypeScript로 작성된 프로젝트에서 Cypress 테스트를 실행하는 방법에 대해 알아보겠습니다.

Cypress 설치

먼저 프로젝트에 Cypress를 설치해야 합니다. 이를 위해서는 다음 명령어를 사용합니다.

npm install cypress --save-dev

이 명령을 실행하면 프로젝트 루트에 cypress 디렉터리가 생성됩니다.

TypeScript 설정

Cypress는 기본적으로 JavaScript를 지원하므로 TypeScript를 사용하려면 몇 가지 추가 구성이 필요합니다. 먼저 TypeScript를 프로젝트에 설치합니다.

npm install typescript --save-dev

그런 다음 tsconfig.json 파일을 생성하고 다음 내용을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  }
}

Cypress TypeScript 지원 플러그인 설치

Cypress에서 TypeScript를 지원하려면 별도의 플러그인을 설치해야 합니다.

npm install @cypress/webpack-preprocessor --save-dev

플러그인을 설치한 후 cypress/plugins/index.js 파일에 다음과 같이 설정을 추가합니다.

const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  const options = {
    webpackOptions: require('../../webpack.config'),
  }
  on('file:preprocessor', webpack(options))
}

테스트 실행

이제 TypeScript로 작성된 Cypress 테스트를 실행할 준비가 되었습니다. 다음 명령어를 실행하여 테스트를 시작합니다.

npx cypress open

이제 Cypress 테스트 실행에 TypeScript를 성공적으로 통합했습니다. Happy testing!

참고 자료

• Cypress 공식 문서

이상입니다. 도움이 되길 바랍니다!