機能

• Vite の設定、トランスフォーマー、リゾルバー、プラグインに対応
• アプリケーションと同じセットアップでテストを実行可能
• HMR のようにスマートで即時性の高いウォッチモード
• Vue、React、Svelte、Lit、Marko などのコンポーネントテストをサポート
• 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 を使用して、目的のモードを明示的に指定できます。

--standalone フラグを付けて Vitest を起動すると、バックグラウンドで実行され続けます。テストが変更されるまで、テストは実行されません。ソースコードが変更されても、そのソースをインポートするテストが実行されるまで Vitest はテストを実行しません。

一般的な Web イディオムを標準で提供

ES Module / TypeScript / JSX / PostCSS を標準でサポートしています。

スレッド

デフォルトでは、Vitest は Tinypool (Piscina の軽量フォーク) を介して node:child_process を使用し、複数のプロセスでテストファイルを同時に実行します。テストスイートをさらに高速化したい場合は、node:worker_threads を使用してテストを実行するために --pool=threads を有効にすることを検討してください（ただし、一部のパッケージはこの設定では動作しない可能性があることに注意してください）。

単一のスレッドまたはプロセスでテストを実行するには、poolOptions を参照してください。

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: string) => arg);

fn('world', 2);

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

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

$ npm i -D happy-dom
# または
$ npm i -D jsdom

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

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

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

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

カバレッジ

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

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

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

インソーステスト

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

これにより、テストは実装と同じクロージャを共有し、エクスポートせずにプライベートな状態をテストできます。同時に、開発のフィードバックループも近くなります。

// src/index.ts

// 実装
export function add(...args: number[]): 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);
  });
}

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

ベンチマーク 実験的

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;
    });
  });
});

型テスト 実験的

型回帰を検出するためにテストを作成できます。Vitest には、同様のわかりやすい API を提供するために expect-type パッケージが組み込まれています。

import { assertType, expectTypeOf, test } 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 }));
});

シャーディング

--shard および --reporter=blob フラグを使用して、異なるマシンでテストを実行します。 すべてのテストとカバレッジの結果は、--merge-reports コマンドを使用して CI パイプラインの最後にマージできます。

vitest --shard=1/2 --reporter=blob
vitest --shard=2/2 --reporter=blob
vitest --merge-reports --reporter=junit --coverage.reporter=text

詳細については、パフォーマンスの向上 | シャーディング を参照してください。

環境変数

Vitest は、フロントエンド関連のテストとの互換性を維持するために、.env ファイルから VITE_ で始まる環境変数を排他的に自動的にロードし、Vite の確立された慣例に従います。.env ファイルからすべての環境変数をロードするには、vite からインポートされた loadEnv メソッドを使用できます。

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // mode は、存在する場合に選択する ".env.{mode}" ファイルを定義します
    env: loadEnv(mode, process.cwd(), ''),
  },
}));