Vue3 + Jest@29 단위 테스트 환경 설정

JUNG MINU·2024년 7월 8일

Vue@3.4, jest@29 버전 기준으로 작성되었습니다.

Vue3에서는 vitest가 더 빠르고 다양한 테스트에 대응하기 때문에 vitest의 사용을 추천합니다. 하지만 vitest를 사용하지 못하는 특수한 경우에 Jest 29버전으로 환경 설정을 하기 위한 내용입니다.

환경 구성

의존성 추가

$ yarn add -D jest @jest/global @babel/core @babel/preset-env @babel/preset-typescript babel-jest

jest: 자바스크립트 및 TypeScript 프로젝트에서 단위 테스트를 위한 테스트 프레임워크
@jest/global: Jest의 글로벌 API를 사용할 수 있도록 합니다.
@babel/core: 최신 자바스크립트 문법을 구 버전 브라우저에서도 동작하게 변환해주는 Babel의 핵심 패키지
@babel/preset-env: Babel이 특정 환경에 맞추어 자동으로 필요한 플러그인을 설정해주는 Babel 프리셋
@babel/preset-typescript: TypeScript 코드를 Babel이 이해할 수 있는 JavaScript로 변환하기 위한 Babel 프리셋
babel-jest: Jest와 Babel을 통합하여 Jest가 Babel을 사용해 코드를 변환할 수 있도록 합니다.

설정 파일 수정

.eslintrc.json

jest의 lint 설정을 활성화합니다.

{
  env: {
    ...
    "jest": true
  },
  ...
}

babel.config.js

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

tsconfig.json

TypeScript 컴파일러가 test파일을 처리할 수 있도록 합니다.

{
  "include": [
    ...
    "src/**/*.test.ts"
  ],
  ...
}

package.json

test script를 추가합니다.

{
  ...
  "scripts": {
    ...
    "test": "jest"
  },
  ...
}

Jest 설정 파일 생성

jest.config.ts

import type { Config } from 'jest';

const config: Config = {
  moduleFileExtensions: ['js', 'ts', 'json', 'vue'], // 확장자가 없는 파일의 import 우선순위를 설정
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // '@/*' alias 설정
  },
  modulePathIgnorePatterns: [ // jest 파일이 포함되지 않을 경로 설정
    '<rootDir>/node_modules',
    '<rootDir>/build',
    '<rootDir>/dist',
    '<rootDir>/.yarn',
  ],
  transform: { // 트랜스파일링 옵션 설정
    '^.+\\.js': 'babel-jest',
    '^.+\\.ts': 'babel-jest',
  },
};

export default config;

테스트 파일 예시

doSomething.test.ts


import { describe, expect, it } from '@jest/globals';
import { doSomething } from './doSomething.ts';

describe('doSomething 단위테스트', () => {
  it('단위테스트의 상세 테스트 항목', () => {
    expect(doSomething('say something')).toBe('Hello World!');
  });

  ...
});