간단한 Cypress 환경설정(React, Typescript)

Full version(?)은 여기서 확인가능하다.

지난 포스팅에서 굉장히 길고 하나하나 살펴 cypress 환경을 설정했다

• [deeper version] Cypress 환경구축 (React, Typescript)

이번 포스팅에서는 cypress를 찾아보면서 발견한 간단하게 모듈설치로 구성할 수 있는 자료를 기반으로 작성하게 되었다.

간단한 Cypress 환경구축 (1)

https://github.com/bahmutov/add-typescript-to-cypress

yarn add -D cypress

typescript 적용하기

cypress/integration/spec.js 를 typescript로 작성해야한다.
@bahmutov/add-typescript-to-cypress 패키지를 설치해주고 dependency를 체크

npx @bahmutov/cly init
$ yarn add -D @bahmutov/add-typescript-to-cypress webpack

//
cypress.json
cypress/
  fixtures/
  integration/
    spec.js
  plugins/
    index.js
  support/
    index.js

{
  "extends": "../tsconfig.json",
  "include": [
    "../node_modules/cypress",
    "*/*.ts"
  ],
  "compilerOptions": {
    "noEmit": false,
    "isolatedModules": false
  }
}

간단한 Cypress 환경구축 (2)

• https://github.com/cypress-io/instrument-cra
• https://www.youtube.com/watch?v=Dsgegf15ccA&t=387s

1. 관련 패키지 설치

   yarn add -d cypress @cypress/code-coverage @cypress/instrument-cra

2. cypress.json (package.json과 동일한 위치)src 폴더 아래에서 cypress가 작동하도록 수정

      {
        "baseUrl": "http://localhost:3000",
        "integrationFolder": "src/cypress/integration",
        "fixturesFolder": "src/cypress/fixtures",
        "supportFile": "src/cypress/support/index.js",
        "pluginsFile": "src/cypress/plugins/index.js"
      }

• baseUrl : default url 설정을 해두면 / 를 기준으로 api 주소 작성이 가능하다
• integrationFolder : 테스트 파일들이 들어가는 폴더로 xxx_spec.jsx 와 같이 기재한다
• fixturesFolder : mock 호출을 만들 때 가짜 데이터들이 필요한데 해당 json 파일들이 이 폴더에 들어간다
• pluginsFile : code-coverage와 같은 플러그인 소스들이 들어간다

3. package.json 수정cypress 스크립트가 실행 전 개발서버 먼저 실행시키게 하는 코드

        "cypress:start:app": "cross-env BROWSER=none react-scripts -r @cypress/instrument-cra start",
        "cypress:start:wait": "start-server-and-test cypress:start:app http://localhost:3000",
        "cypress:open": "npm run cypress:start:wait -- \"cypress open\"",
        "cypress:run": "npm run cypress:start:wait -- \"cypress run\"",