︙

Setting up Vitest with Next.js

Vite と React Testing Library は頻繁に単体テストのために一緒に使用されます。このガイドでは、Next.js と Vitest をセットアップし、初めてのテストを書く方法を示します。

Good to know: async Server Components は、 React エコシステムにとって新しいものであるため、現在 Vitest はこれをサポートしていません。同期的な Server と Client Components に対するユニットテストは実行できますが、asyncコンポーネントに対してはE2E テストを使用することをお勧めします。

Quickstart

あなたは create-next-app を Next.js with-vitest の例とともに使って、すぐに始めることができます：

Terminal

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

Manual Setup

Vitest を手動で設定するには、vitestと次のパッケージを dev 依存関係としてインストールします：

Terminal

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

あなたのプロジェクトの root にvitest.config.ts|js ファイルを作成し、次の options を追加してください：

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 docs をご参照ください。

次に、package.jsonにtestスクリプトを追加します：

package.json

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

npm run testを実行すると、Vitest は default でプロジェクトの変更を監視します。

Creating your first Vitest Unit Test

<Page />の component が見出しを正常にレンダリングするかどうかを確認するための test を作成することで、すべてが正常に動作しているかを確認してください：

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

Good to know: 上記の例では一般的な__tests__の慣例を使用していますが、 test のファイルはappの router 内にも配置できます。

Running your tests

次に、テストを実行するための次のコマンドを実行します：

Terminal

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

Additional Resources

これらのリソースが役立つかもしれません：