Vitest는 Vite라는 빌드 도구와 긴밀하게 통합되어 빠르고 간편한 유닛 테스트 환경을 제공하는 최신 테스트 러너입니다. React나 Vue.js 같은 라이브러리와 잘 어울리며, Vite의 고속 빌드 및 모듈 Hot Reloading 기능을 활용하여 개발자가 테스트를 더욱 효율적으로 작성하고 실행할 수 있게 도와줍니다.

14.2.1 Vitest 설치하기

빠르게 시작하기

아래 명령어와 같이 create-next-app을 with-vitest 예제와 함께 실행하여 Vitest가 설치된 형태의 Next.js 애플리케이션을 곧바로 생성할 수 있습니다.

npx create-next-app@latest --example with-vitest with-vitest-app

수동 설치

Vitest를 수동으로 설치하려면 vitest와 관련 패키지들을 개발 종속성으로 설치해야 합니다.

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react

다음으로 프로젝트의 루트 디렉토리에 vitest.config.js 또는 vitest.config.ts 파일을 만들고 아래와 같이 Vitest 설정파일 내용을 작성합니다.

// vitest.config.ts

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    test: {
        environment: 'jsdom',
    },
});

이후 아래와 같이 test 스크립트를 package.json 파일의 scripts 항목에 추가합니다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

이후 npm run test를 실행하면, Vitest가 프로젝트의 파일 변화를 watch하게 됩니다.

npm run test

14.2.2 Vitest Unit Test 작성 및 실행

Vitest를 사용해서 단위 테스트를 작성하고 실행하는 방법에 대해 살펴보겠습니다. 먼저 아래와 같이 간단한 형태의 Page 컴포넌트가 있다고 해보겠습니다.

// app/page.tsx

import Link from 'next/link';

export default function Page() {
    return (
        <div>
            <h1>Home</h1>
            <Link href='/about'>About</Link>
        </div>
    );
}

이 Page 컴포넌트가 제목(<h1> 태그)을 성공적으로 렌더링하는지 확인하기 위한 테스트 코드를 아래와 같이 작성합니다.

// __tests__/page.test.tsx

import { expect, test } from 'vitest';
import { render, screen } from '@testing-library/react';
import Page from '../app/page';

test('Page', () => {
    render(<Page />);
    expect(
        screen.getByRole('heading', { level: 1, name: 'Home' })
    ).toBeDefined();
});

NOTE. 알아두면 좋은 점
위의 예에서는 일반적인 __tests__ 규칙을 사용하지만, 테스트 파일은 app 라우터 내부에 컴포넌트와 같은 위치에 작성할 수도 있습니다.

그런 다음 아래 명령을 실행하여 테스트를 실행합니다.

npm run test
# or
yarn test
# or
pnpm test
# or
bun test

테스트가 실행되면 Page 컴포넌트를 렌더링하고, 'Home'이라는 이름의 <h1> 태그가 존재하는지 확인하게 됩니다. 만약 존재한다면 테스트가 성공하고, 존재하지 않으면 테스트가 실패하게 됩니다.