[React] 리액트 컴포넌트 테스트 환경 설정

[ TESTING REACT COMPONENTS ]

 

리액트 관련한 코드를 테스트 하는 환경을 설정해보려한다.

Jest라는 친구를 사용해 볼건데 create-react-app할때 이미 셋팅이 되어 있을 것이다.

*Jest : 코드가 제대로 동작하는지 확인하는 Test Case 를 만드는 페이스북이 개발한 'JS 테스팅 프레임워크'

 

우선, npm test -- --coverage --watchAll로 내가 얼마나 코드를 테스트 했는지 현황을 볼 수 있다.

해당 명령어를 쳐서 보니 내가 검사를 하고 싶지 않은 파일까지 함께 떠서 설정을 조금 해주려한다.

 

package.json에서 jest 설정을 해주었다.

해당 경로에 해당하는 파일들만 검사를 하는걸로..!

그리고 다시 coverage 명령어를 사용해보면 내가 설정한 경로의 파일 목록만 보일 것이다.

"jest": {
    "collectCoverageFrom": [
      "./src/components/**/*.tsx",
      "./src/pages/**/*.tsx",
      "./src/routers/**/*.tsx"
    ]
}

 

설정은 여기까지이다.

추가적으로 App.tsx도 테스팅하고싶어서 components로 옮겨주었다.

테스트파일명은 test.spec.tsx로 하거나 __test__폴더에 파일을 만들어주면된다.

이제 테스팅 하러..!🧐