特徴

• Vite の設定、トランスフォーマー、リゾルバー、およびプラグインをそのまま利用可能。
• アプリケーションの設定を流用してテストを実行できます。
• まるでテスト版の HMR のように、高速でスマートなウォッチモード！
• Vue、React、Svelte、Lit などのコンポーネントテストに対応
• TypeScript / JSX をすぐに利用可能
• ESM ファースト、トップレベル await をサポート
• Tinypool を介したワーカーによるマルチスレッド処理
• Tinybench によるベンチマークのサポート
• スイートとテストのフィルタリング、タイムアウト、並行実行が可能
• ワークスペース をサポート
• Jest 互換のスナップショット
• アサーション用に Chai が組み込まれており、Jest expect 互換の API も利用可能
• モック用に Tinyspy が内蔵
• DOM モックには happy-dom または jsdom を利用可能
• v8 または istanbul を介したコードカバレッジ
• Rust のようにソースコード内にテストを記述する インソーステスト
• expect-type を介した型テスト

ビデオで最初のテストを作成する方法を学ぶ

テスト、開発、ビルド間で共有される設定

Vite の設定、トランスフォーマー、リゾルバー、およびプラグインを利用し、アプリケーションと同じ設定でテストを実行します。

詳細については、Vitest の設定を参照してください。

ウォッチモード

$ vitest

ソースコードまたはテストファイルを変更すると、Vitest はモジュールグラフを解析し、関連するテストのみを再実行します。Vite の HMR と同様の動作です！

vitest は、開発環境ではデフォルトで watch mode（ウォッチモード）で起動し、CI 環境（process.env.CI が存在する場合）では run mode（実行モード）で起動します。vitest watch または vitest run を使用して、モードを明示的に指定できます。

一般的な Web イディオムをすぐに利用可能

ES Module、TypeScript、JSX、PostCSS をすぐに利用できます。

スレッド

Tinypool（Piscina の軽量フォーク）を介したワーカーによるマルチスレッド処理により、テストを並行して実行できます。スレッドは Vitest でデフォルトで有効になっており、CLI で --no-threads を指定することで無効にできます。

Vitest では、各ファイルの環境が分離されているため、あるファイルの環境変数が他のファイルに影響することはありません。分離は、CLI に --no-isolate を指定することで無効にできます（精度が低下する代わりに実行性能が向上します）。

テストフィルタリング

Vitest は、テストを絞り込むための多くの方法を提供しており、テストの実行を高速化し、開発に集中できます。

詳細については、テストフィルタリングを参照してください。

テストの並行実行

連続するテストで .concurrent を使用して、それらを並行して実行します。

import { describe, it } from 'vitest';

// concurrent でマークされた 2 つのテストは、並行して実行されます
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

スイートで .concurrent を使用すると、その中のすべてのテストが並行して実行されます。

import { describe, it } from 'vitest';

// このスイート内のすべてのテストは、並行して実行されます
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

並行スイートやテストでも .skip、.only、および .todo を使用できます。詳細については、API リファレンスを参照してください。

WARNING

並行テストを実行する場合、スナップショットとアサーションは、正しいテストが検出されるように、ローカルの テストコンテキスト から expect を使用する必要があります。

スナップショット

Jest 互換 のスナップショットをサポートします。

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

詳細については、スナップショットを参照してください。

Chai および Jest expect との互換性

Chai はアサーション用に組み込まれており、Jest expect 互換の API も利用できます。

マッチャーを追加するサードパーティライブラリを使用している場合は、test.globals を true に設定すると、互換性が向上します。

モック

Tinyspy は、vi オブジェクト上の jest 互換 API を使用したモック用に内蔵されています。

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation(arg => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

Vitest は、DOM およびブラウザ API のモックのために happy-dom と jsdom の両方をサポートしています。これらは Vitest に同梱されていないため、別途インストールする必要があります。

$ npm i -D happy-dom
# or
$ npm i -D jsdom

その後、設定ファイルで environment オプションを変更します。

// vite.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom', // or 'jsdom', 'node'
  },
});

詳細については、モックを参照してください。

カバレッジ

Vitest は、v8 を介したネイティブコードカバレッジと、istanbul を介したインストルメント化されたコードカバレッジをサポートしています。

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

詳細については、カバレッジを参照してください。

インソーステスト

Vitest は、Rust のモジュールテスト と同様に、実装と一緒にソースコード内でテストを記述する方法も提供しています。

これにより、テストは実装と同じクロージャ（スコープ）を共有し、エクスポートせずにプライベートな状態をテストできます。そのため、開発効率が向上します。

// src/index.ts

// 実装
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0);
}

// インソーステストスイート
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

詳細については、インソーステストを参照してください。

ベンチマーク ^{experimental（実験的）}

Vitest 0.23.0 以降、Tinybench を介して bench 関数を使用してベンチマークテストを実行し、パフォーマンスの結果を比較できます。

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

型テスト ^{experimental（実験的）}

Vitest 0.25.0 以降、型テストを記述 して型の回帰を検出できます。Vitest には、同様で理解しやすい API を提供するために、expect-type パッケージが付属しています。

import { assertType, expectTypeOf } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }));
});