[cypress] cypress 초기 세팅

연관 내용
[Jest]
[cypress : E2E]

1. cypress 설치

[cypress]
[typescript]
[eslint-plugin-cypress]

yarn add cypress --dev
yarn add --dev typescript
yarn add eslint-plugin-cypress --dev // cypress 테스트 파일 내에서 eslint를 적용하기 위한 패키지
yarn add cypress-react-selector --dev //cypress에서 get과 같은 메서드를 이용하지 않고 react component를 바로 불러올 수 있는 패키지

2. 설정

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["node", "cypress", "cypress-react-selector"],
  },
  "include": ["**/*.ts"]
}

.eslintrc.json

{
  "plugins": ["cypress"]
}

.eslintrc.js

module.exports = {
  env: {
    "cypress/globals": true,
  },
  extends: ["plugin:cypress/recommended", "standard", "prettier"],
  rules: {
    "cypress/no-assigning-return-values": "error",
    "cypress/no-unnecessary-waiting": "error",
    "cypress/assertion-before-screenshot": "warn",
    "cypress/no-force": "warn",
    "cypress/no-async-tests": "error",
    "cypress/no-pause": "error",
  },
};

cypress/support/index.js

import 'cypress-react-selector'

cypress.json

{
  "env": {
    "cypress-react-selector": {
      "root": "#root"
    }
  }
}

3. test 명령어 추가

package.json

    "test": "cypress open"

터미널에서 yarn test를 입력하면 cypress 테스트 창이 실행된다.

cypress-react-selector 사용법

cy.react('MyComponent').should('have.length', '1');