Next.js (App Router)でvitestを最低限の設定してテストするまでのメモ

Next.js (App Router)でvitestを最低限の設定してテストするまでのメモ

何回もググっているので調べなくてもいいようにメモ。

環境

• Next.js (App Router)

フォルダ構成

srcフォルダがないプロジェクト構成です

.
├─ __test__
  ├─ integration
  // その他テスト
├─ app
├─ components

1 パッケージのインストール

npm i -D @vitejs/plugin-react vite-tsconfig-paths vitest @testing-library/jest-dom @testing-library/react happy-dom

修正(12/12)
ライブラリ名を間違えていました。申し訳ございません。

- @testing-library/react-dom
+ @testing-library/jest-dom

2 vitest.config.tsの作成

vitest用の設定ファイルを作成する。

import { defineConfig } from 'vitest/config'
import tsconfigPaths from "vite-tsconfig-paths"
import react from '@vitejs/plugin-react';
import path from 'path'

export default defineConfig({
  plugins: [react(),tsconfigPaths()],
  resolve: {
    alias: {
      '@/': path.resolve(__dirname),
    }
  },
  test: {
    globals: true,
    environment: "happy-dom", // jsdom使っている場合などは変更してください
    setupFiles: "./__test__/setup/setup.ts"
  },
})

3 test/setup.tsの作成

import '@testing-library/jest-dom/vitest'

修正(12/12)
呼び出し方を間違えていました。申し訳ございません。

- import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/vitest'

4 テスト実行

テストファイルを作成する

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Home from '@/app/page'
 
test('Page', () => {
  render(<Home />)
  expect(screen.getByRole('list')).toBeDefined()
})

結果

こうなればOK

✓ __test__/integration/page.test.tsx (1)
   ✓ Page

 Test Files  1 passed (1)
      Tests  1 passed (1)

発生したエラー等

• vitest.config.tsのpluginsにreact()を記述し忘れていたため、以下のようなエラーが発生した。

ReferenceError: React is not defined

参考