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를 재시작 해보기
'Frontend > Cypress' 카테고리의 다른 글
Custom Commands (0) | 2024.12.02 |
---|---|
Intercept() : cypress를 이용해 request를 가로채는 법 (0) | 2024.11.29 |
Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트 (0) | 2024.11.25 |
Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법 (0) | 2024.11.25 |
Cypress, 실제 사용 환경에 가까운 테스트 (0) | 2024.11.14 |