Jest를 사용한 커버리지 확인

Apr 22, 2024

Contents

설치 설정 pakage.json jest.config.js 코드 작성 caculator.ts 코드 calculator.test.ts 코드 실행

설치

jest 를 설치해주기 위해서 터미널을 열고 아래 명령어를 쳐주자

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

이 명령어는 각각 어떤걸 말하는 걸까??

jest: Jest는 JavaScript 애플리케이션을 위한 테스팅 프레임워크다. 단위 테스트 및 통합 테스트를 작성하고 실행하는 데 사용된다. Jest는 테스트 러너와 어사션 라이브러리를 포함하고 있어서 테스트 코드를 작성하고 실행할 수 있다.
jest-environment-jsdom: Jest에서 DOM을 시뮬레이션하기 위한 환경을 제공한다. React 애플리케이션을 테스트할 때 가상 DOM을 생성하여 DOM 이벤트 및 상태 변경을 테스트하는 데 사용된다.
@testing-library/react: React 컴포넌트를 테스트하기 위한 도구 세트다. 이 라이브러리는 React 애플리케이션에서 컴포넌트의 동작을 시뮬레이션하고 검증하는 데 도움이 된다. 사용자 인터페이스 요소의 상호 작용과 상태를 테스트하는 데 유용하다.
@testing-library/jest-dom: Jest에서 DOM 요소를 검증하기 위한 확장 라이브러리입니다. Jest 테스트에서 DOM 요소에 대한 검증을 보다 간단하게 만들어 준다. 예를 들어, 특정 요소가 화면에 나타나거나 특정 이벤트가 발생했는지를 검증할 때 사용된다.

2,3,4 번은 nextjs 12버전 이후로는 내부적으로 설치되어있어 따로 설치해주지 않아도 된다고 한다.

설정

pakage.json

    "test": "jest --verbose",
    "coverage": "jest --coverage"

이제 우리는 npm run test 명령어를 통해 테스트를 실행할 수 있고
npm run coverage 명령어를 통해 테스트 커버리지에 대한 결과를 볼 수 있다.

뒤에 붙은 verbose 옵션의 경우 추가하지 않았을 때보다 각각의 테스트에 대해 소요되는 시간, 더 자세한 오류 메세지 등 더욱 자세한 출력을 얻을 수 있다. (빼도 무방하다.)

coverage의 경우 jest로 얼마만큼 코드를 커버했는지 나타내주는 옵션이다.
프론트 개발의 경우 jest 로 100% 커버하는 것은 거의 불가능하기 때문에 범위를 주고
해당 범위만 커버를 한다는 생각으로 작동시키면 된다.
npm run coverage 를 하게 되면 coverage 폴더가 생성되는데 해당 폴더의 html 파일을 실행시켜보면 위의 이미지와 같이 보기 쉽게 정리해 준다.

jest.config.js

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

const customJestConfig = {
  collectCoverageFrom: ["./components/**/*.ts"],
  coverageThreshold: {
    global: {
      statements: 95,
      branches: 90,
      functions: 95,
      lines: 90,
    },
  },
};

module.exports = createJestConfig(customJestConfig);

필요한 옵션이 있다면 공식문서의 config 부분을 보고 추가해주자.
위의 코드에서 설정한 것은 collectCoverageFrom, coverageThreshold 두 개의 옵션이다.

collectCoverageFrom [array]

coverage 정보를 수집해야 하는 파일 집합을 나타내는 glob 패턴 배열이다. 파일이 지정된 glob 패턴과 일치하는 경우에도 해당 파일에 대한 테스트가 없거나 테스트 스위트에서 필요하지 않더라도 해당 파일에 대한 커버리지 정보가 수집된다.

coverageThreshold [object]

coverage 결과에 대한 최소 임계값 강제를 구성하는데 사용되는 옵션이다.
임계값은 전역적으로, glob으로, 그리고 디렉터리 또는 파일 경로로 지정할 수 있다.
임계값을 충족하지 않으면 jest가 실패한다. 양수로 지정된 임계값은 필요한 최소 백분율로 간주되며, 음수로 지정된 임계값은 허용된 최대 미처리 엔티티 수를 나타낸다.

코드 작성

caculator.ts 코드

export const add = (a: number, b: number) => {
  return a + b;
};

export const subtract = (a: number, b: number) => {
  return a - b;
};

export const multiple = (a: number, b: number) => {
  return a * b;
};

export const divide = (a: number, b: number) => {
  return a / b;
};

calculator.test.ts 코드

import { add, subtract, multiple, divide } from "./calculator";

it("덧셈 계산 테스트", () => {
  expect(add(2, 4)).toBe(6);
});

it("뺄셈 계산 테스트", () => {
  expect(subtract(2, 4)).toBe(-2);
});

it("곱셈 계산 테스트", () => {
  expect(multiple(2, 4)).toBe(8);
});

it("나눗셈 계산 테스트", () => {
  expect(divide(2, 4)).toBe(0.5);
});