Cypress 환경구축 (React, Typescript)

a.very·2021년 6월 14일
8

STEP 1. Cypress 환경 구축하기

1. 관련패키지 설치

devDependencies에 install

  • Cypress 설치
$ yarn add -D cypress
info Direct dependencies
└─ cypress@6.7.1
info All dependencies
├─ @cypress/listr-verbose-renderer@0.4.1
├─ @cypress/request@2.88.5
├─ @cypress/xvfb@1.2.4
  • 주요 플러그인 설치
    • @cypress/instrument-cra : Little module for CRA applications to instrument code without ejecting react-scripts (github)
    • @cypress/code-coverage : Code Coverage (cypress설명) (github)
$ yarn add -D @cypress/instrument-cra  @cypress/code-coverage 
info Direct dependencies
├─ @cypress/code-coverage@3.9.2
└─ @cypress/instrument-cra@1.4.0
  • ( check ) pacakage.json > devdepencencies

2. cypress.json

cypress 관련 파일들이 src 폴더 아래에서 cypress가 작동하도록 pacakge.json과 동일한 위치에 cypress.json 파일을 생성후 아래 내용을 작성함.

{
  "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. cypress 폴더 구성하기 (1)

** 참고 : Cypress 폴더 Structure

// /cypress - to hold all things Cypress i.e. tests, fixtures, page objects, utils, plugins, commands
// |--> /fixtures - JSON files of common data objects needed in tests
// |--> /integration - all of our tests, we would often create sub-folders per page/feature or even by group of tests
// |--> /pages - page objects and each feature would often have its own sub-folder for the pages related to it
// |--> /plugins - custom plugins to run in a Node server, each feature/page would have its own sub-folder for API teardown/setup
// |--> /support - custom commands and types here
// |--> /utils - extra utility files to be used throughout
// |--> /config - environment configuration JSON files to extend/override the base cypress.json file - not all teams did this but it's another approach
  • cypress/support/index.js
import '@cypress/code-coverage/support'
  • cypress/plugins/index.js
    • eslint ignore라인 추가
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)

  // add other tasks to be registered here

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}
  • cypress/fixtures/example.json (삭제해도됨)
{
  "name": "Using fixtures to represent data",
  "email": "hello@cypress.io",
  "body": "Fixtures are a great way to mock data for responses to routes"
}
  • integration / app.spec.tsx

뒤쪽에서 작성할예정

4. tsconfig.json 수정

아래내용 추가해주기 (cypress - typescript 사용위한 설정)

"compilerOptions": {

		...

    **"types": [ 
      "cypress"
    ]**
  },

5. .gitignore 에서 cypress 테스트 녹화비디오, 스크린샷 등 결과물 ignore하기

# cypress
cypress/videos
cypress/screenshots
.nyc_output

6. cypress 폴더 구성하기 (2) + 첫번째 테스트 작성하기

integration

  • integration / app.spec.tsx
  • Naming Convention : 테스트 파일명은 파일이름.spec.tsx (~~~.spec.js) 의 네이밍 컨벤션 따름
    • examples
// integration/app.spec.tsx

it('테스트코드 작성 중',()=>{
  cy.visit('http://localhost:3000/requests/order')
  cy.findAllByText('원룸이사').should('exist')
})

! 이때, —isolatedModules 오류가 뜨면 아래와 같이 해결할 수 있다.

해결방법1 (채택)

  • export {}을 삽입
export {}

it('테스트코드 작성 중',()=>{
  cy.visit('http://localhost:3000/requests/order')
  cy.findAllByText('원룸이사').should('exist')
})

해결방법2

  • tsconfig 에서 "isolatedModules"을 true에서 false로 변경
{
  "compilerOptions": {
    "isolatedModules": false
  }
}

7. pacakage.json 에서 Configuration 설정하기

  • 기존 testing 관련 파일을 삭제

scripts 에서 기존 test:jest를 제거하고 아래 처럼 변경

  • point : cypress 스크립트가 실행 전 개발서버 먼저 실행시키기
    • 하나는 개발목적
    • 하나는 ci 서버위에서 테스트하기 위한 목적
"scripts": {
    "start": "react-scripts start",
    "build": "react-app-rewired build",
    **"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\"",
    "eject": "react-app-rewired eject",**
    "lint": "eslint . --ext .tsx --ext .ts --ext .js",
    "dev": "BROWSER=none react-app-rewired start"
  },
  • cypress:start:app": "cross-env BROWSER=none react-scripts -r @cypress/instrument-cra start"
    • start가 있어서 실행하지만 broswer가 none이라 리액트 스크립트가 브라우저를 열지않음
    • -r : bundle이 react scripts로 생성되게 보장하고 code coverage analysis에서 필수적임
  • "cypress:start:wait": "start-server-and-test cypress:start:app http://localhost:3000",
    • localhost:3000이 켜진게 확실히 되고 테스트 실행하게 한다.
  • cypress:open ⇒ cypress를 devlopment도중에 실행시키기
  • cypress:run ⇒ ci서버 위에서 headless모드로 cypress 실행시키기

8. 끝! 테스트 실행해보기

$ npm run cypress:open
$ npm run cypress:run // headless모드로 CI서버에서 실행 / 터미널에서 실행되고 비디오 리코딩됨 

커버리지 report html으로 보기

$ open coverage/lcov-report/index.html 

이렇게 커버리지 리포트가 나온다.
(참고 : https://docs.cypress.io/guides/tooling/code-coverage#Code-coverage-as-a-guide)

** 필요에 따라서 설치

npm install --save-dev start-server-and-test
npm install cross-env

STEP2 - 세팅이후 추가 플러그인

1. Cypress Testing Library (사실상 필수라고 생각할 만큼 유용하다.)

npm install --save-dev @testing-library/cypress

타입스크립트를 같이 사용하기위해 tsconfig.json 에 아래 내용추가 !

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

아랫줄 추가 in  cypress/support/commands.js

`import '@testing-library/cypress/add-commands'`

2. cypress-react-selector (리액트요소 접근)

사용예시 (https://github.com/gregfenton/example-cypress-react-selector-formik/blob/master/cypress/integration/form_spec.js)

  • react 요소 (component, props, state )등에 접근하게 해줌
  • 내부적으로 cypress-react-seletor는 resq 라는 라이브러리를 호출해서 리액트릐 VirtualDOM을 가져온다. (몰라도됨)

아래 플러그인도 추천

설치하기

npm i --save -D cypress-react-selector

Update Cypress/support/index.js  에 아래 내용 추가하기

import 'cypress-react-selector'

typescript 사용시

{
  "compilerOptions": {
    "sourceType": "module",
    "types": ["node", "cypress", "cypress-react-selector"]
  }
}

문제가 되는 내용이 있다면 알려주세요!

References

profile
🚚chanhee-jeong.tistory.com 🚀 github.com/chaneeii/iOS-Study-Log

0개의 댓글