리액트 test-libarary #1-3 ESLint Prettier TDD

테스트를 위한 ESLint & Prettier 설정하기

ESLint + jest 플러그인
테스팅관련 문법오류 + suggestion 해줌

세부설정

다운로드 npm i eslint-plugin-testing-library eslint-plugin-jest-dom

.eslintrc.json

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

동작확인

코드를 textcontetn로 짜면 suggestion 해주는지 확인
=>fix하기 누를 수 있음

TDD

테스트 코드를 먼저 작성하고 => (fail함) =>실제 코드작성 => test 성공함
TDD 하면 좋은 점

• 디버깅 시간 줄어든다.
• 소스코드를 신중하게 짜게되어 clean code

#1 테스트코드 먼저짜고

• id가 counter인
  

##2 실제 코드 짜기

References

TDD https://shylog.com/tdd-in-react-using-react-testing-library/