Typescript와 Jest를 사용하여 테스트 코드 작성하기

김지수·2023년 5월 16일
0

Jest

Jest란 페이스북에서 개발한 테스트 프레임워크로 Jest 등장 이전에는 mocha, chai 등 여러가지 테스트
라이브러리를 조합해서 사용했으나 Jest의 등장으로 Test Runner와 Test Mathcher, Test Mock 기능까지
한번에 제공해주기 때문에 요즘 많이 사용하고 있는 테스트 프레임워크이다.

Test Runner:
작성된 테스트 코드를 실제로 동작시키는 기능

Test Mathcher:
다양한 방법으로 테스트 코드의 값을 확인할 수 있는 기능으로 chai와 같은 라이브러리를 통해
Should, Expect, Assert 등 다양한 인터페이스를 제공받을 수 있다.

Test Mock:
단위테스트를 진행할 때 함수가 네트워크, 데이터베이스 등 제어하기 어려운 부분들을 포함하는
경우 실제 기능이 동작하지 않지만 상태나 행위 등을 검증하기 위해서 사용하는 가짜함수
(mock, stub, spy 등이 있음)

모듈 설치

npm i jest @types/jest ts-jest typescript ts-node -D

@types/jest : jest에 대한 타입 정의를 위한 모듈

ts-jest : Jest를 사용하여 TypeScript로 작성된 프로젝트를 테스트할 수 있는 소스 맵을 지원하는 Jest 변환기


Jest Config 파일 생성

jest --init

설정 값에 따라 jest.config.ts 파일이 생성된다. 주석 설명에 따라 원하는 설정을 추가할 수 있다.

  • jest.config.ts
    export default {
      clearMocks: true,
      collectCoverage: true,
      coverageDirectory: "coverage",
      coveragePathIgnorePatterns: [
        "/node_modules/"
      ],
      coverageProvider: "v8",
      preset: 'ts-jest',
      roots: [
        "<rootDir>/src"
      ],
      testEnvironment: "node",
      testMatch: [
        "**/__tests__/**/*.+(ts|tsx|js)",
        "**/?(*.)+(spec|test).+(ts|tsx|js)"
      ],
      testPathIgnorePatterns: [
        "/node_modules/"
      ],
      transform: {
        "^.+\\.(ts|tsx|js)$": "ts-jest"
      },
      transformIgnorePatterns: [
        "/node_modules/",
      ],
    };
    

Typescript 버전 이슈

typescript 버전 V3에서는 ts-jest로 테스트할 수 없다.

낮은 버전에서 ts-jest로 테스트를 실행하는 경우 다음과 같은 에러를 반환한다.

위 WARN에서도 설치되어있는 typescript 버전으로는 ts-jest로 테스트되지 않는다고 표시됨

typescript 최신버전으로 버전 업그레이드하여 ts-jest를 사용한다.

typescript: ^3.9.10 → ^5.0.4로 버전 업데이트

테스트 코드에서 import 사용하기

확장자가 js인 테스트 코드를 작성할 때 모듈을 import해서 사용하면 테스트 실행 시 에러가 발생하게 된다.

typescript를 실행시킬 때 보통 ts-node를 사용하게 되는데 ts-node는 내부적으로 typescript를
javascript로 변환한 뒤 실행시키기 때문에 ts 확장자 파일에서는 바로import 키워드 사용이 가능한 것이다.

하지만 테스트 코드는 jest 모듈이 실행시키기 때문에 다른 설정을 해주지 않으면 테스트 대상 코드를 javascript라고 인식하여 에러가 발생한다.

그렇다면 테스트 코드에서 import를 사용하기 위해서 어떤게 필요할까?

babel 모듈을 이용한다면 import가 가능하다.

@babel/preset-env 모듈은 ECMAScript2015(es6) 이상의 코드를 이전 버전으로 변경해준다.

npm i -D @babel/preset-typescript @babel/preset-env
  • .babelrc 파일
    {
    	"presets": ["@babel/preset-typescript", "@babel/preset-env"]
    }

만약 이렇게 설정했는데도 import를 사용했을 때 테스트 코드에러 에러가 발생한다.

jest.config 파일을 확인해본다.

transform에 js 를 추가하여 js도 변환될 수 있도록 설정이 필요하다.

profile
백엔드 노드 개발자

0개의 댓글