Cypress Typescript에서 ESlint 초기설정

처음에 Cypress를 실행하면 @types/mocha 나 @types/jest를 설치하라고 에러 메시지가 나오는데 정답은 아니고

typescript cypress eslint설정하는 방법이 있다.

일단 Cypress ESLint Plugin 설치

yarn add eslint-plugin-cypress --dev

// eslintrc.json

{
  "plugins": [
    "cypress"
  ]
}

// eslintrc.json
// 각 rule의 내용은 검색해보기
{
  "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"
  }
}

// eslintrc.json

{
  "env": {
    "cypress/globals": true
  }
}

// eslintrc.json

{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

yarn add --dev typescript

// tsconfig.json

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

cypress 테스트 파일들은 example.cy.ts 이런 식으로 작성되므로 include에 해당 형식을 추가한다.

 

 

https://github.com/cypress-io/eslint-plugin-cypress

GitHub - cypress-io/eslint-plugin-cypress: An ESLint plugin for projects that use Cypress

https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfig-json

TypeScript | Cypress Documentation