単体テストマニュアル１ - プロジェクトにテスト環境を構築する

インストール Vitest

以下のコマンドで、Vitest をインストールします。

pnpm i vitest -D
# あるいは
yarn add vitest -D
# あるいは
npm i vitest -D

Vitest が Develop 環境に使われるので、-D を必ずつけてインストールしてください。

pnpm でインストールするのがおすすめです。

vitest.config.ts 設定

もしプロジェクト内に vitest.config.ts と vite.config.ts が共存する場合、vitest.config.ts の設定が vite.config.ts の設定よりも優先され、上書きされます。

以下の vitest.config.ts ファイルを行ごとにコメントで解説します。

// `vitest/config` の `defineConfig` を使用します。
import { defineConfig } from "vitest/config";
import path from "path";

// glob パターンを利用して、
// テストに含む全てのファイルを定義します。
const include = [
  "shared/**/*.spec.{ts,js}",
  "auth/**/*.spec.{ts,js}",
  "public/**/*.spec.{ts,js}",
  "components/**/*.spec.{ts,js}",
  "features/**/*.spec.{ts,js}",
];

// カバレッジに含む全てのファイルを定義します。
const coverageInclude = [
  "shared/**/*.{ts,js}",
  "auth/**/*.{ts,js}",
  "public/**/*.{ts,js}",
  "components/**/*.{ts,js}",
  "features/**/*.{ts,js}",
];

// テスト不要のファイルを定義します。
const defaultExclude = [
  // node_modules に含まれる .ts と .js 拡張子のファイル
  "node_modules/**/*.{ts,js}",
  // パッケージング後の成果物に含まれる .ts と .js 拡張子のファイル
  "out/**/*.{ts,js}",
  // E2Eテストとコンポーネントテストのディレクトリに含まれる .ts と .js 拡張子のファイル
  "tests/**/*.{ts,js}",
  // 設定ファイル
  "**/*.config.{ts,js}",
  // story に関するファイル
  "**/*.stories.{ts,js}",
  ".storybook/*.{ts,js}",
  // .next に含まれる .ts と .js 拡張子のファイル
  ".next/**/*.{ts,js}",
  // 型定義ファイル
  "**/*.d.ts",
  // ダミーデータを定義しているファイル
  "**/*dummy*.{ts,js}",
  "**/*sample*.{ts,js}",
  // スタイルファイル
  "**/*Style*.{ts,js}",
];

// glob パターンマッチングでカバーされていない、テスト不要のファイルは指定されたパスで除外します。
const specificFilesExclude = [
  // 特定のファイルのパス
  "auth/aw-exports.ts",
  "components/input/IconInputValidation.ts",
  // ...
];

// テスト不要の全てのファイルを定義します。
const excludedFiles = [...defaultExclude, ...specificFilesExclude];

export default defineConfig({
  // `vitest` を設定するには、設定ファイルに `test` 属性を追加する必要があります。
  test: {
    // Vitest のデフォルトのテスト環境は Node.js 環境です。
    // Webアプリケーションを構築している場合は、Node.js を jsdom や happy-dom などのブラウザライクな環境に置き換えることができます。
    environment: "happy-dom",
    // テストファイルを含む glob パターンを定義します。
    include,
    // テストファイルを除外する glob パターンを定義します。
    exclude: excludedFiles,
    // テストカバレッジデータを収集するには、coverage 属性を追加する必要があります。
    coverage: {
      // provider でテストカバレッジデータを収集するツールを選択します。
      provider: "v8",
      // テストカバレッジデータの収集を有効にします。
      enabled: true,
      // テストが失敗しても、カバレッジレポートは生成されます。
      reportOnFailure: true,
      // テストカバレッジレポーターの形式を設定します。
      reporter: ["text", "json", "html"],
      // テストカバレッジに含まれるテスト対象の glob パターンを定義します。
      include: coverageInclude,
      // テストカバレッジから除外されるテスト対象の glob パターンを定義します。
      exclude: excludedFiles,
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./"),
    },
  },
});

ディレクトリ構造

テストファイルはテスト対象モジュールと並列に __tests__ ディレクトリに配置します。

store
  ├── __tests__
  │       ├── utils
  │       │     └── index.spec.ts
  │       └── count.spec.ts
  ├── count.ts
  └── utils
        └── index.ts

store ディレクトリにさらに深いディレクトリ構造が存在する場合は、__tests__ ディレクトリも同じ構造を維持するべきです。

テストファイルの命名

各テストファイルは一つのモジュールまたはコンポーネントのみをテストします。

テストファイルの命名は *.spec.ts をします。

例えば、count.ts のテストファイルは count.spec.ts とします。