はじめに

概要

Vitest（「ヴィーテスト」と発音します）は、Vite を基盤とした次世代のテストフレームワークです。

このプロジェクトの背景にある考え方については、「Vitest を選ぶ理由」セクションで詳しく学ぶことができます。

Vitest をオンラインで試す

StackBlitz で Vitest をオンラインで試すことができます。StackBlitz 上では Vitest がブラウザで直接実行されるため、ローカル環境とほぼ同じように動作し、マシンに何もインストールする必要がありません。

プロジェクトに Vitest を追加する

ビデオでインストール方法を学ぶ

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest は Vite v5.0.0 以降および Node v18.0.0 以降を必要とします。

上記のいずれかの方法で vitest を package.json にインストールすることをお勧めします。ただし、vitest を直接実行したい場合は、npx vitest を使用できます（npx ツールは npm および Node.js に付属しています）。

npx ツールは指定されたコマンドを実行します。デフォルトでは、npx はまずローカルプロジェクトのバイナリにコマンドが存在するかどうかを確認します。見つからない場合、npx はシステムの $PATH を探し、見つかれば実行します。いずれの場所にもコマンドが見つからない場合、npx は実行前に一時的な場所にインストールします。

テストの記述

ここでは例として、2 つの数値を加算する関数の出力を検証する簡単なテストを作成します。

export function sum(a, b) {
  return a + b;
}

import { expect, test } from 'vitest';
import { sum } from './sum.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

デフォルトでは、テストファイル名には .test. または .spec. を含める必要があります。

次に、テストを実行するには、package.json に以下のセクションを追加します。

{
  "scripts": {
    "test": "vitest"
  }
}

最後に、使用しているパッケージマネージャーに応じて npm run test、yarn test、または pnpm test を実行すると、Vitest は以下のメッセージを表示します。

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Bun をパッケージマネージャーとして使用している場合、bun test コマンドの代わりに bun run test コマンドを使用してください。そうしない場合、Bun 独自のテストランナーが実行されます。

Vitest の使用方法の詳細については、API セクションをご覧ください。

Vitest の設定

Vitest の主な利点の一つは、Vite との統合された設定です。設定ファイルが存在する場合、vitest はルートの vite.config.ts を読み込み、Vite アプリケーションのプラグインや設定に合わせます。たとえば、Vite の resolve.alias および plugins の設定は、そのまま利用できます。テスト中に異なる設定が必要な場合は、以下のいずれかの方法で設定できます。

• vitest.config.ts を作成する（このファイルが優先されます）
• CLI に --config オプションを渡す（例: vitest --config ./path/to/vitest.config.ts）
• defineConfig の process.env.VITEST または mode プロパティを使用し（上書きされない限り test に設定されます）、vite.config.ts で条件付きで異なる設定を適用する

Vitest は Vite と同様に、以下の設定ファイル拡張子をサポートしています: .js、.mjs、.cjs、.ts、.cts、.mts。Vitest は .json 拡張子をサポートしていません。

Vite をビルドツールとして使用していない場合でも、設定ファイルの test プロパティを使用して Vitest を設定できます。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // ...
  },
});

TIP

Vite を直接使用していなくても、Vitest はその変換パイプラインのために Vite に大きく依存しています。したがって、Vite ドキュメントに記載されている任意のプロパティも設定できます。

すでに Vite を使用している場合は、Vite の設定に test プロパティを追加します。また、設定ファイルの先頭にトリプルスラッシュディレクティブを使用して Vitest の型定義への参照を追加する必要があります。

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ...
  },
});

<reference types="vitest" /> は次のメジャーアップデートで機能しなくなりますが、Vitest 2.1 から vitest/config への移行を開始できます。

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ... ここにオプションを指定します。
  },
});

設定オプションのリストについては、設定リファレンスを参照してください。

WARNING

Vite と Vitest で設定ファイルを分けることを決定した場合、Vitest の設定ファイルは Vite のファイルを上書きし、拡張しないため、同じ Vite オプションを Vitest の設定ファイルで定義する必要があります。また、vite または vitest/config から mergeConfig メソッドを使用して、Vite の設定と Vitest の設定をマージすることもできます。

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // ...
    },
  })
);

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

ただし、2 つのファイルを別々に作成するのではなく、Vite と Vitest の両方に同じファイルを使用することをお勧めします。

プロジェクトのサポート

テストプロジェクトを使用して、同じプロジェクト内で異なるプロジェクト設定を実行できます。vitest.config ファイルで、プロジェクトを定義するファイルやフォルダのリストを定義できます。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // プロジェクトを定義するためにグロブパターンの一覧を使用できます
      // Vitest は設定ファイルのリストを想定しています
      // または設定ファイルが存在するディレクトリ
      'packages/*',
      'tests/*/vitest.config.{e2e,unit}.ts',
      // 同じテストを、
      // 同じ "vitest" プロセス内で異なる設定で実行することも可能です
      {
        test: {
          name: 'happy-dom',
          root: './shared_tests',
          environment: 'happy-dom',
          setupFiles: ['./setup.happy-dom.ts'],
        },
      },
      {
        test: {
          name: 'node',
          root: './shared_tests',
          environment: 'node',
          setupFiles: ['./setup.node.ts'],
        },
      },
    ],
  },
});

コマンドラインインターフェース

Vitest がインストールされたプロジェクトでは、npm スクリプトで vitest バイナリを使用したり、npx vitest で直接実行したりできます。以下は、スキャフォールドされた Vitest プロジェクトにおけるデフォルトの npm スクリプトです。

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

ファイルの変更を監視せずに一度だけテストを実行する場合は、vitest run を使用します。 --port や --https などの追加の CLI オプションを指定できます。CLI オプションの完全なリストについては、プロジェクトで npx vitest --help を実行してください。

コマンドラインインターフェースについて詳しく学ぶ

依存関係の自動インストール

Vitest は、特定の依存関係がまだインストールされていない場合に、それらのインストールを促します。この動作は、VITEST_SKIP_INSTALL_CHECKS=1 環境変数を設定することで無効にできます。

IDE 統合

Vitest でのテスト体験を向上させるために、Visual Studio Code 用の公式拡張機能も提供しています。

VS Code Marketplace からインストール

IDE 統合について詳しく学ぶ

例

例	ソース	プレイグラウンド
basic	GitHub	オンラインでプレイ
fastify	GitHub	オンラインでプレイ
in-source-test	GitHub	オンラインでプレイ
lit	GitHub	オンラインでプレイ
vue	GitHub	オンラインでプレイ
marko	GitHub	オンラインでプレイ
preact	GitHub	オンラインでプレイ
react	GitHub	オンラインでプレイ
solid	GitHub	オンラインでプレイ
svelte	GitHub	オンラインでプレイ
sveltekit	GitHub	オンラインでプレイ
profiling	GitHub	利用不可
typecheck	GitHub	オンラインでプレイ
projects	GitHub	オンラインでプレイ

Vitest を使用しているプロジェクト

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

未リリースコミットの使用

main ブランチの各コミット、および cr-tracked ラベルが付いた PR は、pkg.pr.new に公開されます。npm i https://pkg.pr.new/vitest@{commit} でインストールできます。

ご自身の変更をローカルでテストしたい場合は、ご自身でビルドしてリンクすることができます（pnpm が必要です）。

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # このステップではお好みのパッケージマネージャーを使用できます

次に、Vitest を使用しているプロジェクトに移動して、pnpm link --global vitest を実行します（または、vitest をグローバルにリンクするために使用したパッケージマネージャー）。

コミュニティ

ご質問やサポートが必要な場合は、Discord および GitHub Discussions のコミュニティにお問い合わせください。