TIL | testing-library, Jest-Dom eslint 설정하기

Testing Library, Jest-DOM eslint 설정하기

plugin 설치

yarn add -D eslint-plugin-jest-dom eslint-plugin-testing-library

• eslint-plugin-jest-dom: jest-dom 체크를 위한 eslint 플러그인
• eslint-plugin-testing-library: testing-library 체크를 위한 eslint 플러그인

---

 

package.json

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

• 기존 package.json의 eslintConfig 부분 지워주기

---

 

eslintrc.json

{
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

• 기존 package.json에서 제거한 react-app, react-app/jest에 추가로 설치한 플러그인을 extends에 기입

---

 

결과 확인

• 테스트 코드의 eslint가 정상적으로 작동하는 것을 확인할 수 있다. (lint는 settings.json에서 "source.fixAll.eslint": true 옵션을 추가하여 적용해주었다.)

---

 

Reference

• eslint-plugin-testing-library github
• eslint-plugin-jest-dom github
• testing library ecosystem docs