はじめに

概要

Vitest は、Vite を基盤とした高速なユニットテストフレームワークです。

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

Vitest をオンラインで試す

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

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

ビデオでインストール方法を学ぶことができます

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

TIP

Vitest には、Vite >= v3.0.0 および Node >= v14.18 が必要です。

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

npx コマンドは、ローカルの node_modules/.bin からコマンドを実行するか、コマンドを実行するために必要なパッケージをインストールします。デフォルトでは、npx はコマンドが $PATH にあるか、ローカルプロジェクトのバイナリに存在するかを確認し、存在すれば実行します。コマンドが見つからない場合、実行前にインストールされます。

テストを作成する

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

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

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

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

次に、テストを実行するために、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 (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

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

Vitest の設定

Vitest の主な利点の 1 つは、Vite との設定が統一されている点です。vitest が存在する場合、ルートにある vite.config.ts を読み込み、Vite アプリのプラグインやセットアップを適用します。たとえば、Vite の resolve.alias や plugins の設定はそのまま利用できます。テスト時に異なる設定が必要な場合は、次のいずれかの方法があります。

• vitest.config.ts を作成します。これはより高い優先度を持ちます。
• --config オプションを CLI に渡します。例：vitest --config ./path/to/vitest.config.ts
• vite.config.ts 内で条件に応じて設定を切り替えるには、process.env.VITEST または defineConfig の mode プロパティを使用します（これらが設定されていない場合は test が適用されます）。

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: {
    // ...
  },
});

構成オプションのリストについては、Config Reference を参照してください。

WARNING

Vite と Vitest で別々の 2 つの設定ファイルを使用する場合、Vitest の設定ファイルで同じ Vite オプションを定義してください。Vitest の設定ファイルは Vite の設定ファイルを拡張するのではなく、上書きするためです。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()],
});

Vite と Vitest で別々の設定ファイルを作成するよりも、同じファイルを使用することをおすすめします。

ワークスペースのサポート

Vitest ワークスペース を使用して、同じプロジェクト内で異なる構成のプロジェクトを実行できます。vitest.workspace ファイルでワークスペースを定義するファイルやフォルダのリストを指定できます。このファイルは、js/ts/json 拡張子をサポートしています。この機能は、モノレポのセットアップに最適です。

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // you can use a list of glob patterns to define your workspaces
  // グロブパターンを使ってワークスペースを定義できます
  // Vitest expects a list of config files
  // Vitest は設定ファイルのリストを必要とします
  // or directories where there is a config file
  // または設定ファイルが存在するディレクトリ
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // 同じテストを実行することも可能です
  // but with different configs in the same "vitest" process
  // ただし、同じ "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 を実行してください。

コマンドラインインターフェース の詳細

IDE 統合

テストエクスペリエンスを向上させるために、Visual Studio Code 用の公式拡張機能を提供しています。

VS Code Marketplace からインストール

IDE 統合 の詳細

例

例	ソース	プレイグラウンド
basic	GitHub	オンラインでプレイ
fastify	GitHub	オンラインでプレイ
graphql	GitHub	オンラインでプレイ
image-snapshot	GitHub	オンラインでプレイ
lit	GitHub	オンラインでプレイ
mocks	GitHub	オンラインでプレイ
nextjs	GitHub	オンラインでプレイ
playwright	GitHub
puppeteer	GitHub
react-enzyme	GitHub	オンラインでプレイ
react-mui	GitHub	オンラインでプレイ
react-storybook	GitHub	オンラインでプレイ
react-testing-lib-msw	GitHub	オンラインでプレイ
react-testing-lib	GitHub	オンラインでプレイ
react	GitHub	オンラインでプレイ
ruby	GitHub	オンラインでプレイ
solid	GitHub	オンラインでプレイ
svelte	GitHub	オンラインでプレイ
vitesse	GitHub	オンラインでプレイ
vue-jsx	GitHub	オンラインでプレイ
vue	GitHub	オンラインでプレイ
vue2	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

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

最新機能をいち早く試したい場合は、vitest リポジトリ をローカル環境にクローンし、自身でビルドしてリンクする必要があります（pnpm が必要です）。

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

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

コミュニティ

質問やヘルプが必要な場合は、Discord および GitHub Discussions でコミュニティに連絡してください。