naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🍕

Next.js + Vitest の環境構築手順

公開日
20日前
2025-10-10
更新日
16日前
2025-10-13
更新履歴
GitHubで見る
  • Vitest
  • Next.js

参考

Testing: Vitest | Next.js
Learn how to set up Vitest with Next.js for Unit Testing.
nextjs.org favicon
nextjs.org
Testing: Vitest | Next.js

必要なパッケージのインストール

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 を次のように設定することで便利になります。

package.json
{
  "scripts": {
    // ...
    "test": "vitest",
    "test:coverage": "vitest run --coverage",
    "test:run": "vitest run"
    // ...
  },
}

目次

最近更新された記事

🛷
開発日記-2025-10-29 / tocbot のオプション
1日前 - 2025年10月29日
  • 開発日記
  • tocbot
🚩
Next.js 16にアップグレードする
3日前 - 2025年10月27日
  • Next.js
✒️
エンジニア個人ブログまとめ
3日前 - 2025年10月27日
  • デザイン
  • Next.js
  • Markdown