0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@SKY-HaYaTo

【Next.js】テストフレームワークVitestの設定と実行、カバレッジレポート(HTML)の出力まで解説

0
Last updated at Posted at 2025-12-28

今回は、Vitestを使ったテストの設定について書いていきます。

Vitest のセットアップ

まず、必要なパッケージを追加します。

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom @testing-library/user-event

ディレクトリ構成

frontend/
├─ app/
│  └─ src/
│     └─ sample.ts
├─ __tests__/
│  └─ sample.test.ts
├─ tsconfig.json
├─ vitest.config.ts
└─ package.json

モジュールのインストール

後述のvitest.config.jsで使うためのモジュールをインストールします。

npm install -D vite-tsconfig-paths

vitest.config.tsの作成と更新

vitest.config.ts
import { defineConfig } from 'vitest/config'//←変更
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      "@":path.resolve(__dirname,".")// "@": path.resolve(__dirname, "./src")
    },
  },
  test:{
    globals:true,
    environment:"node",
    css:false
  },
})

package.jsonの修正

package.json
{
  "name": "my-next-app13",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest", 
    "test:watch": "vitest --watch"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@tailwindcss/vite": "^4.1.18",
    "@vitejs/plugin-react": "^5.1.2",
    "axios": "^1.13.2",
    "framer-motion": "^12.23.24",
    "next": "13.5.11",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.1",
    "@testing-library/user-event": "^14.6.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.11",
    "jsdom": "^27.4.0",
    "postcss": "^8",
    "prettier": "3.6.2",
    "tailwindcss": "^3",
    "typescript": "^5",
    "vitest": "^4.0.16"
  }
}

tsConfig.jsonの修正

tsConfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    },
    "types": ["vitest/globals"]👈追加
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

tsConfig.app.jsonの作成

tsConfig.app.json
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client","vitest/globals"],//「"vitest/globals"」を追加
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*":[
        "./src/*"
      ]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

tsConfig.node.jsonの作成

tsConfig.node.json
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node", "vitest/globals"],//追加
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

テスト対象のコードの作成

frontend/app/src/sample.ts
export const add = (n:number)=>n+n;

テストコードの作成

frontend/__test__/sample.test.ts
import { describe,expect,test,vi } from "vitest";
import { add } from "@/app/src/sample";

describe('足し算',()=>{
    test('2+2=4',()=>{
        expect(add(2)).toBe(4);
    })
});

テスト実行

テストは下記のコマンドで実行します。

npm run test

また、特定のテストファイルのみをテストしたい場合は下記のようにします。
テストファイルが格納されているディレクトリまで移動して、

cd frontend

下記のコマンドを実行します。

npx vitest run <テストフォルダ>/<テストファイル>
(例)
npx vitest run __tests__/sample.test.ts

カバレッジレポートの出力

カバレッジレポートの出力には、下記のライブラリが必要になります。

@vitest/coverage-v8

カバレッジの出力は下記のコマンドを実行します。

npx vitest run --coverage <テストフォルダ>/<テストファイル>

(例)
npx vitest run --coverage __tests__/sample.test.ts

そうすると、下記に「coverage」というフォルダが作成されます。
image.png

index.htmlを開くと下記のようにレポートがブラウザに表示されます。
image.png

トラブルシューティング

トラブル1

下記のエラーが表示された場合

failed to load config from C:\Users\xxx\Desktop\app\frontend\vitest.config.ts Error [ERR_REQUIRE_ESM]: require() of ES Module 
C:\Users\xxx\Desktop\app\frontend\node_modules\vite\dist\node\index.js from C:\Users\xxx\Desktop\app\frontend\node_modules\vitest\dist\config.cjs not supported.

(原因)
❌ エラーの意味（重要）

Error [ERR_REQUIRE_ESM]:
require() of ES Module vite/dist/node/index.js
from vitest/dist/config.cjs not supported

これはつまり👇
・vitest.config.ts が ESM
・でもNode.jsがCommonJSとして読み込もうとしている
→ vite は ESM 専用なので explode 💥

(解決策)
package.json を ESM にする
frontend/package.json

package.json
{
  "type": "module"
}

全体のpackage.json破棄の通りです。

package.json
{
  "name": "my-next-app13",
  "version": "0.1.0",
  "private": true,
  "type": "module",👈これを追加する
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest", 
    "test:watch": "vitest --watch"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@tailwindcss/vite": "^4.1.18",
    "@vitejs/plugin-react": "^5.1.2",
    "axios": "^1.13.2",
    "framer-motion": "^12.23.24",
    "next": "13.5.11",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.1",
    "@testing-library/user-event": "^14.6.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.11",
    "jsdom": "^27.4.0",
    "postcss": "^8",
    "prettier": "3.6.2",
    "tailwindcss": "^3",
    "typescript": "^5",
    "vitest": "^4.0.16"
  }
}

トラブル2

下記のようなエラーが出た。

Error: Cannot find package '@/app/src/sample' imported from 'C:/Users/xxxx/Desktop/app/frontend/__tests__/sample..test.ts' ❯ __tests__/sample..test.ts:2:1 1| import { describe,expect,test,vi } from "vitest"; 2| import { add } from "@/app/src/sample";

(原因)
❌ エラーの正体

Cannot find package '@/app/src/sample'

これは Vitest が @ の意味を正しく解釈できていない 状態です。

今の import：

import { add } from "@/app/src/sample";

現在のディレクトリ構成は下記です。

frontend/
├─ app/
│  └─ src/
│     └─ sample.ts
├─ __tests__/
│  └─ sample.test.ts
├─ vitest.config.ts

しかし、今のvitest.config.tsは下記のようなっています。

vitest.config.ts
alias: {
  "@": path.resolve(__dirname, "./src")
}

つまり：
./src ❌ 存在しない
正しいのは ./app/src であるため、

そのため Vitest が
@/app/src/sample を解決できず、エラーになっています。

ちなみに、@ = frontend/を指しています。

なので、vitest.config.tsを下記のように修正します。

vitest.config.ts
import { defineConfig } from 'vitest/config'//←変更
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      "@":path.resolve(__dirname,".")
    },
  },
  test:{
    globals:true,
    environment:"node",
    css:false
  },
})

サイト

テストフレームワーク「Vitest」を使う方法

Jestの使い方を簡単に調べてみます

Vitestを使ったモダンなJavaScriptテスト入門

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?