cypress 세팅 방법

개요

Cypress 를 세팅하여, 내 앱을 테스트할 수 있는 환경을 만들어보자.

설치

pnpm install cypress --save-dev

테스팅 도구라서 글로벌한 어딘가에 설치해야 된다고 생각했는데, cypress 공식 문서 에서는 프로젝트 경로에 설치하는 것을 권장하고 있다.

Best Practice

The recommended approach is to install Cypress with npm because:

Cypress is versioned like any other dependency.
It simplifies running Cypress in Continuous Integration.

열어보기

npx cypress open

위와 같이 실행 명령어를 입력 후에 조금 기다리면,

위 화면처럼 런치패드가 뜬다. 나는 E2E 테스팅을 할 것이기 때문에 E2E Testing 버튼을 클릭했다.

Cypress 이용하기

위와 같은 화면이 뜨면 여기서부터 브라우저를 통한 GUI 로 진행할 수 있다.

Cypress 타입 인식시키기

Cypress 파일인 ...cy.js 파일을 작성할 때 자동완성의 도움을 받고 싶다면, jsconfig.json 파일을 작성하든지, 아니면 /// 로 시작하는 타입 참조를 IDE 에게 전달해야 한다. 그래야 Intelligent code completion 기능을 이용할 수 있다.

jsconfig.json 파일 작성하기 (권장)

{
  "include": ["./node_modules/cypress", "cypress/**/*.js"]
}

tsconfig.json 파일 작성하기 (타입스크립트)

{
  "compilerOptions": {
    "allowJs": true,
    "types": ["cypress"]
  },
  "include": ["**/*.*"]
}

슬래시 3개로 타입 참조해주기

/// <reference types="../support" />

레퍼런스

https://docs.cypress.io/guides/getting-started/installing-cypress
https://docs.cypress.io/guides/tooling/IDE-integration#Writing-Tests