보일러 플레이트에 jest 세팅하기

jest 설치

• npm install --save-dev jest

스크립트 설정

{
  "scripts": {
    "test": "jest"
  }
}

바벨 사용하기

npm install --save-dev babel-jest @babel/core @babel/preset-env

• babel-jest
  • jest는 commonjs 모듈을 사용해서 es6 이상의 문법을 es5문법으로 트랜스파일링하는 바벨이 필요함. jest에서 babel을 사용할 수 있게 연결해 주는 브릿지 역할
• @babel/core
  • 바벨의 엔진 역할
• @babel/preset-env
  • 바벨 프리셋(플러그인 뭉치)의 환경 역할
• babel.config.js

  module.exports = {
    presets: [
      ['@babel/preset-env', { targets: { node: 'current' } }],
      '@babel/preset-typescript',
    ],
  };

  아니면 webpack.config에 하던가
  
• ts-jest

  npm install --save-dev ts-jest

  jest가 타입스크립트의 경우 순수하게 트랜스파일링만 하기 때문에, jest가 테스트가 실행될 때 타입 검사를 하지않음. 따라서 ts-jest를 설치해서 타입스크립트 컴파일러를 사용하게해 트랜스파일하도록하자
  

타입 가져오기

npm install --save-dev @types/jest

@jest/globals도 있긴한데 세팅이 귀찮다.

jest.config.js 세팅

• npm init jest@lates

import type { Config } from 'jest';

const config: Config = {
  // 기본적으로 ts-jest를 사용하여 TypeScript 파일을 트랜스파일합니다.
  preset: 'ts-jest',

  // 테스트 환경을 Node.js로 설정합니다.
  testEnvironment: 'node',

  // 테스트 파일의 위치를 지정합니다.
  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],

  // Jest가 처리할 파일 확장자를 설정합니다.
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

  // Jest가 테스트할 파일 또는 디렉터리를 지정합니다.
  rootDir: '.',

  // 테스트 실행 전에 모든 모의 객체를 재설정합니다.
  resetMocks: true,

  // 모든 모의 객체의 상세 정보를 지웁니다.
  clearMocks: true,

  // 변환 규칙을 지정합니다.
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest', // TypeScript 파일 변환
    '^.+\\.(js|jsx)$': 'babel-jest', // JavaScript 파일 변환
  },

  // 코드 커버리지 수집을 위해 Babel 프로바이더를 사용합니다.
  coverageProvider: 'babel',

  // 코드 커버리지 보고서 생성을 위한 설정
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'lcov'],

  // 모듈 경로 별칭을 tsconfig.json과 일치시킵니다.
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

export default config;