[Next.js] Next.js 프로젝트에 Vitest + React Testing Library 설정하기 (React 19, Next 15, TS)

- 테스트 프레임워크

  - vitest: 2.1.8                           :  Jest 호환 테스트 러너

  - @vitejs/plugin-react: 4.3.4             :  React 컴포넌트 테스트 지원

  - vite-tsconfig-paths: 5.1.4              :  TypeScript 경로 설정 지원

- UI 및 커버리지 도구

  - @vitest/ui: 2.1.8                       :  테스트 실행 UI 인터페이스

  - @vitest/coverage-istanbul: 2.1.8        :  코드 커버리지 측정

  - istanbul: 0.4.5                         :  상세 커버리지 리포트 생성

- DOM 테스트 도구

  - jsdom: 25.0.1                           :  브라우저 환경 시뮬레이션

  - @testing-library/react: 16.1.0          :  React 컴포넌트 테스트 도구

  - @testing-library/jest-dom: 6.6.3        :  DOM 테스트 매처

  - @testing-library/user-event: 14.5.2     :  사용자 이벤트 테스트 도구

- TypeScript 관련

  - @typescript-eslint/eslint-plugin: 8.19.1 :  TS 린팅 규칙

  - @typescript-eslint/parser: 8.19.1       :  TS 파싱

  - @types/testing-library__jest-dom: 5.14.9 :  jest-dom 타입 정의

- ESLint 관련

  - eslint-plugin-jest-dom: 5.5.0           :  jest-dom 린팅

  - eslint-plugin-testing-library: 7.1.1    :  Testing Library 린팅

  - eslint-plugin-vitest: 0.5.4             :  Vitest 린팅

 

설치 명령어

 

npm install -D vitest @vitejs/plugin-react vite-tsconfig-paths @vitest/ui @vitest/coverage-istanbul istanbul jsdom @testing-library/react @testing-library/jest-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/testing-library__jest-dom eslint-plugin-jest-dom eslint-plugin-testing-library eslint-plugin-vitest @testing-library/user-event

 

 

 

 

.eslint.config.mjs 추가

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import vitestPlugin from "eslint-plugin-vitest";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
   // 테스트 관련 플러그인
   ...compat.extends(
    "next/core-web-vitals",
    "next/typescript",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:testing-library/react",   
    "plugin:jest-dom/recommended",  
    "plugin:vitest/recommended",  
  ),

  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    rules: {
      "no-unused-vars": "warn",
      "vitest/expect-expect": "off",
      "react/prop-types": "on",
    },
    settings: {
      react: {
        version: "19.0", 
      },
    },
    languageOptions: {
      globals: {
        ...vitestPlugin.environments.env.globals,
      },
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
  },
];

export default eslintConfig;

 

vitest.config.ts 추가

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    
    globals: true, // setupTst.ts 설정 읽을 수 있게
    outputFile: './coverage', // 커버리지 리포트 저장경로
    environment: 'jsdom', // JSDOM 환경 설정
    setupFiles: ['./src/setupTests.ts'], // setup 파일 경로 설정
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
    deps: {
      optimizer: {
        web: {
          include: [
            '@testing-library/jest-dom', '@testing-library/react']
        }
      }
    },
    coverage: {
      provider: 'istanbul', // istanbul provider 사용
      reporter: ['text', 'json', 'html'],
      // istanbul 특정 옵션들
      all: true, // 테스트되지 않은 파일도 포함
      include: [
        'src/**/*.{js,ts}'
      ],
      exclude: [
        'node_modules/**',
        '**/*.d.ts',
        '**/*.test.{js,ts}',
        '**/types/**'
      ],
      // istanbul 임계값 설정
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 80,
        statements: 80
      }
    }
  }
})

 

./src 하위에 setupTests.ts 추가

import '@testing-library/jest-dom';
import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

// Vitest의 expect에 jest-dom matchers 추가
expect.extend(matchers);