React Testing Library를 사용하여 React에서 코드 커버리지를 얻는 방법
코드 커버리지는 테스트의 효과를 측정하는 중요한 지표입니다. 이는 테스트에 의해 코드의 얼마나 많은 부분이 실행되었는지를 파악하고, 더 많은 관심이 필요한 영역을 식별하는 데 도움이 됩니다. 이 기사에서는 React Testing Library를 사용하여 React에서 코드 커버리지를 얻는 방법을 살펴보겠습니다.
React Testing Library 설정
create-react-app을 사용하는 경우, React Testing Library를 설정하는 것은 간단합니다. 이미 프리인스톨되어 구성되어 있으므로 즉시 테스트를 작성할 수 있습니다. 그러나 코드 커버리지를 얻으려면 몇 가지 조정을 해야 합니다.
기본적으로 create-react-app은 테스트를 watch 모드에서 실행하며, 이는 코드 커버리지 보고서를 생성하지 않습니다. 커버리지 보고서를 얻으려면 테스트를 단일 실행 모드에서 실행해야 합니다. 이는 테스트 명령어 앞에 CI=true 환경 변수를 추가하여 수행할 수 있습니다.
"test:coverage": "CI=true react-scripts test --env=jsdom --coverage"이 구성으로 npm run test:coverage를 실행하면 테스트가 실행되고, coverage 폴더에 커버리지 보고서가 생성됩니다.
코드 커버리지를 포함하여 테스트 실행
create-react-app을 사용한다면, npm run test -- --coverage 또는 yarn test -- --coverage 명령어를 실행하여 코드 커버리지 보고서를 생성할 수 있습니다.
npm run test -- --coverage이 명령어는 테스트를 실행하고, 터미널에서 자세한 코드 커버리지 보고서를 제공합니다. 또한 coverage 폴더에 HTML 보고서가 생성됩니다.
대체 구성
일부 경우에는 위의 명령어를 사용하면 테스트가 제대로 종료되지 않을 수 있습니다. 이 문제를 해결하기 위해 다음 구성을 package.json에 추가할 수 있습니다:
"test:coverage": "react-scripts test --env=jsdom --watchAll=false --coverage"이러한 구성으로 npm run test:coverage를 실행하여 문제 없이 코드 커버리지 보고서를 얻을 수 있습니다.
결론
React Testing Library를 사용하여 React에서 코드 커버리지를 얻는 것은 테스트의 효과를 보장하는 가치 있는 실천 방법입니다. 이 기사에서 안내한 단계를 따라서 포괄적인 코드 커버리지 보고서를 손쉽게 생성하고, 코드베이스의 품질에 대한 통찰력을 얻을 수 있습니다.
기억하세요, 코드 커버리지는 테스트의 일부에 불과하며, 핵심 기능을 포함하는 의미 있는 테스트를 작성하는 것이 중요합니다. React Testing Library의 강력한 기능을 활용하여 견고하고 유지보수 가능한 테스트를 작성하세요.
