연관 내용
[Jest]
[cypress : E2E]
[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를 바로 불러올 수 있는 패키지
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"
}
}
}
package.json
"test": "cypress open"
터미널에서 yarn test
를 입력하면 cypress 테스트 창이 실행된다.
cypress-react-selector 사용법
cy.react('MyComponent').should('have.length', '1');