Frontend/Cypress

Cypress testing libray 설치

wam 2024. 11. 14. 22:13

 

Cypress testing libray 설치

https://testing-library.com/docs/cypress-testing-library/intro

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

 

 

설치 후 Element 사용 가능

  • react testing Libray에서 사용했던 getByText와 같은 걸 사용해 element를 가져 올 수 있다.
  • getByText, getByRow, getByContainer를 사용할 수 있게 된다.

 

 

types에 추가하기

// cypress/tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": ["cypress", "@testing-library/cypress"],
    "outDir": "#"
  },
  "include": ["./**/*.*"]
}

 

 

명령어 확장하기

https://testing-library.com/docs/cypress-testing-library/intro#usage

cypress/support/commands.js:

...

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

testing libray가 제공하는 findByPlaceholderText, findByRole 등을 사용할 수 있다.

참고, 명령어 확장이 되지 않을 경우 vscode를 재시작 해보기