안녕하세요. J4J입니다.
이번 포스팅은 Jest로 테스트 커버리지 확인하는 방법 첫 번째인 개념과 설정 방법에 대해 적어보는 시간을 가져보려고 합니다.
테스트 커버리지란?
테스트 커버리지는 테스트 케이스가 작성된 소스 코드 범위를 의미하는 것으로 실제 기능 동작을 위해 작성된 다양한 코드들이 테스트 코드로 얼마나 작성이 이루어졌는지 확인하도록 도와줍니다.
그리고 React에서 테스트 커버리지를 확인해보고 싶을 때 사용해 볼 수 있는 대표적인 라이브러리로 Jest가 존재합니다.
많은 개발자 분들이 테스트 코드를 작성하기 위해 Jest를 사용하고 계실 것이고, Jest를 사용하고 계시는 중이라면 간단하게 테스트 커버리지를 적용해 볼 수 있습니다.
만약 Jest 설정이 필요하신 분들은 다음 글들을 참고하시면 좋을 것 같습니다.
Jest로 테스트 커버리지 수행하는 방법
Jest 사용 환경이 설정되어 있는 상태에서 테스트 커버리지를 수행하는 방법은 간단합니다.
다음과 같이 package.json에 script 명령어를 추가한 뒤 명령어를 실행해보면 coverage가 동작되는 것을 확인해 볼 수 있습니다.
{
"scripts": {
"coverage": "jest --coverage"
},
}
$ npm run coverage
커버리지 설정 (1) - collectCoverageFrom
이번엔 자주 사용될 수 있는 커버리지 설정들에 대해 확인해보겠습니다.
먼저 커버리지 관련 설정들은 모두 Jest 관련 설정 파일들을 작성하는 jest.config.js를 활용하시면 됩니다.
그리고 그중 첫 번째인 collectCoverageFrom은 coverage 수집을 위한 범위 설정을 도와줍니다.
collectCoverageFrom의 default값은 undefined로 따로 설정하지 않으면 테스트 코드를 통해 사용되는 파일들에 대해서만 커버리지 목적으로 수집됩니다.
하지만 collectCoverageFrom 값을 설정하면 경로에 해당되는 파일들에 대해 커버리지가 수행됩니다.
그리고 추가로 알고 있으면 좋은 정보로는 collectCoverageFrom에 경로를 설정하더라도 test.ts 등의 테스트 목적의 파일과 같은 기본적인 수집 제외 대상 파일들은 여전히 커버리지 수집 대상이 되지 않습니다.
또한 대상에 추가할 경로뿐만 아니라 대상에 추가하고 싶지 않은 경로도 "!" 키워드를 활용하여 함께 넣어줄 수 있습니다.
설정은 다음과 같이 해볼 수 있습니다.
// jest.config.js
module.exports = {
// coverage 수집을 위한 범위 설정 (default undefined, 테스트로 실행된 소스 코드에서만 수집이 이루어짐)
collectCoverageFrom: [
'src/**/*.{ts,tsx}', // src하위에 있는 모든 ts, tsx 파일들 수집 (테스트 파일은 수집되지 않음)
'!src/except/**/*', // src/except 하위에 있는 모든 파일들은 수집 제외
'!src/vite-env.d.ts', // src/vite-end.d.ts 파일은 수집 제외
'!src/main.tsx', // src/main.tsx 파일은 수집 제외
],
};
커버리지 설정 (2) - coverageDirectory
coverageDirectory는 커버리지 수집 결과에 대한 reporter 자료들이 저장되는 폴더 경로를 설정할 수 있도록 도와줍니다.
default 값은 undefined로 따로 설정을 하지 않으면 다음과 같이 <rootDir>/coverage 경로에 reporter 자료들이 담깁니다.
여기서 만약 다음과 같이 coverageDirectory 경로를 설정한다면 다음과 같이 설정한 경로로 reporter 자료들이 담기는 것을 확인해 볼 수 있습니다.
// jest.config.js
module.exports = {
// coverage reporter 파일 directory 설정 (default undefined, <rootDir>/coverage에 coverage reporter 파일을 저장)
coverageDirectory: '<rootDir>/custom-coverage',
};
커버리지 설정 (3) - coveragePathIgnorePatterns
coveragePathIgnorePatterns는 커버리지 수집 제외 범위를 설정하도록 도와줍니다.
위에서 했던 collectCoverageFrom에서 "!" 키워드를 활용한 것과 유사한 기능을 제공해 주는 것으로, 만약 수집 제외 범위를 collectCoverageFrom에서 하지 않았다면 동일한 결과를 다음과 같이 coveragePathIgnorePatterns에서 할 수 있습니다.
// jest.config.js
module.exports = {
// coverage 수집을 위한 범위 설정 (default undefined, 테스트로 실행된 소스 코드에서만 수집이 이루어짐)
collectCoverageFrom: [
'src/**/*.{ts,tsx}', // src하위에 있는 모든 ts, tsx 파일들 수집 (테스트 파일은 수집되지 않음)
// '!src/except/**/*', // src/except 하위에 있는 모든 파일들은 수집 제외
// '!src/vite-env.d.ts', // src/vite-end.d.ts 파일은 수집 제외
// '!src/main.tsx', // src/main.tsx 파일은 수집 제외
],
// coverage 수집 제외 범위 설정 (default ["/node_modules/"])
coveragePathIgnorePatterns: [
'src/except/', // src/except 하위에 있는 모든 파일들은 수집 제외
'src/vite-env.d.ts', // src/vite-end.d.ts 파일은 수집 제외
'src/main.tsx', // src/main.tsx 파일은 수집 제외
],
};
커버리지 설정 (4) - coverageReporters
coverageReporters는 커버리지 수집 결과에 대한 repoter 자료들을 어떤 것을 생성할지에 대한 설정입니다.
default 값은 ["clover", "json", "lcov", "text"]로 아무 설정을 하지 않고 커버리지를 실행해 보면 다음과 같이 reporter 자료들을 확인할 수 있습니다.
여기서 만약 다음과 같이 설정을 한다면 설정된 reporter 들만 생성되는 것을 확인할 수 있습니다.
// jest.config.js
module.exports = {
// coverage reporter 종류 설정 (default ["clover", "json", "lcov", "text"])
coverageReporters: ['lcov', 'text'],
};
커버리지 설정 (5) - coverageThreshold
coverageThreshold는 커버리지 수집된 결과의 비율 한계점을 설정하는 것으로 원하는 만큼의 비율이 충족되지 않으면 Jest 동작이 실패되도록 도와줍니다.
default 값은 undefined이기 때문에 비율이 낮더라도 문제가 없지만 만약 다음과 같이 coverageThreshold를 설정한다면 충족하지 못할 때 Jest 동작이 실패되는 것을 볼 수 있습니다.
// jest.config.js
module.exports = {
// coverage 비율 한계점 설정 (default undefined)
coverageThreshold: {
// 전역 설정
global: {
statements: 80, // 구문 실행 비율
branches: 80, // if-else 등 분기 처리 비율
functions: 80, // 함수 실행 비율
lines: 80, // 코드 라인 실행 비율
},
// 특정 경로 설정
'src/**/*.ts': {
statements: 90, // 구문 실행 비율
branches: 90, // if-else 등 분기 처리 비율
functions: 90, // 함수 실행 비율
lines: 90, // 코드 라인 실행 비율
},
},
};
한계점을 설정하는 속성 값들은 statements, branches, functions, lines가 존재합니다.
각 속성들에 대한 설명은 위에 간단하게 설명해 놨지만, 관련되어 조금 더 자세한 내용들을 다음 글에서 적어볼 예정이니 더 궁금하신 분들은 참고 부탁드립니다.
커버리지 설정 (6) - forceCoverageMatch
forceCoveraegeMatch는 커버리지에서 기본적으로 담고 있지 않은 파일들도 커버리지 대상으로 추가할 수 있도록 도와주는 설정입니다.
대표적으로 위에서 collectCoverageFrom 설정에 테스트 파일에 대한 경로도 추가를 했었지만 실제 커버리지 수집에는 적용되지 않은 것을 말해볼 수 있습니다.
이런 경우와 같이 강제적으로 커버리지 대상으로 추가하고 싶은 경우 forceCoverageMatch를 사용해 볼 수 있습니다.
forceCoverageMatch를 설정하는 방법은 다음과 같이 해볼 수 있으며, 설정을 할 경우 기본적으로 제외되는 파일들에 대해서도 수집이 이루어지는 것을 확인할 수 있습니다.
// jest.config.js
module.exports = {
// coverage에 기본적으로 담지 않는 파일들도 coverage 대상에 추가되도록 설정 (ex, 테스트 파일)
forceCoverageMatch: ['**/*.test.{ts,tsx}'],
};
이상으로 Jest로 테스트 커버리지 확인하는 방법 첫 번째인 개념과 설정 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] react-i18next로 다국어 처리하기 (1) | 2023.11.23 |
|---|---|
| [React] Jest로 테스트 커버리지 확인하기 (2) - 커버리지 비율 한계점 (4) | 2023.11.20 |
| [React] Jest Query 우선순위 비교 (3) | 2023.11.12 |
| [React] Jest Query 사용 방법 비교, render vs screen (2) | 2023.11.06 |
| [React] Jest 이벤트 처리 비교, fireEvent vs userEvent (2) | 2023.11.02 |
댓글