Lang x Lang

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.jsontestスクリプトを追加します:

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 を作成することで、すべてが正常に動作しているかを確認してください:

pages/index.tsx
import Link from 'next/link'

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

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
__tests__/index.test.tsx
import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../pages/index'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})
__tests__/index.test.jsx
import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../pages/index'

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

Running your tests

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

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

Additional Resources

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

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use