Next.js와 Vitest 설정하기

Vite와 React Testing Library는 단위 테스트를 위해 자주 함께 사용됩니다. 이 가이드에서는 Next.js와 Vitest를 설정하고 첫 번째 테스트를 작성하는 방법을 보여드리겠습니다.

알아두면 좋은 점: async 서버 컴포넌트는 React 생태계에 새로 도입되었기 때문에 Vitest는 현재 이를 지원하지 않습니다. 동기식 서버 및 클라이언트 컴포넌트에 대한 단위 테스트는 여전히 실행할 수 있지만, async 컴포넌트에 대해서는 E2E 테스트를 사용하는 것을 권장합니다.

빠른 시작

Next.js with-vitest 예제와 함께 create-next-app을 사용하여 빠르게 시작할 수 있습니다:

Terminal

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

수동 설정

Vitest를 수동으로 설정하려면 vitest와 다음 패키지들을 개발 의존성으로 설치하세요:

Terminal

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

프로젝트의 루트에 vitest.config.ts|js 파일을 생성하고 다음 옵션을 추가하세요:

vitest.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
  },
});

vitest.config.js

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
  },
});

Vitest 구성에 대한 자세한 정보는 Vitest Configuration 문서를 참조하세요.

그런 다음 package.json에 test 스크립트를 추가하세요:

package.json

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

npm run test를 실행하면 Vitest는 기본적으로 프로젝트의 변경 사항을 감시합니다.

첫 번째 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>
  );
}

app/page.jsx

import Link from "next/link";
 
export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  );
}

__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();
});

__tests__/page.test.jsx

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();
});

알아두면 좋은 점: 위의 예제는 일반적인 __tests__ 규칙을 사용하지만, 테스트 파일은 app 라우터 내부에 함께 위치할 수도 있습니다.

테스트 실행하기

그런 다음 다음 명령을 실행하여 테스트를 실행하세요:

Terminal

npm run test
# 또는
yarn test
# 또는
pnpm test
# 또는
bun test

추가 자료

다음 자료들이 도움이 될 수 있습니다:

테스트 Jest