参考
Testing: Vitest | Next.js
Learn how to set up Vitest with Next.js for Unit Testing.
nextjs.org
必要なパッケージのインストール
Terminal
pnpm add -D -E vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths @vitest/coverage-v8設定ファイルの作成
vitest.config.mts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [tsconfigPaths(), react()],
test: {
environment: 'jsdom',
},
})package.json の scripts
次のように設定することで便利になります。
package.json
{
"scripts": {
// ...
"test": "vitest",
"test:coverage": "vitest run --coverage",
"test:run": "vitest run"
// ...
},
}
