移行ガイド

Jest からの移行

Vitest は、Jest からの移行を可能な限り容易にするため、Jest 互換の API で設計されています。しかし、移行の際に以下の相違点に遭遇する可能性があります。

デフォルトでのグローバル変数

Jest では、グローバル API がデフォルトで有効になっています。Vitest はそうではありません。globals 設定 を使用してグローバル変数を有効にするか、vitest モジュールからインポートするようにコードを更新してください。

グローバル変数を無効にしたままにする場合は、testing-library などの一般的なライブラリが、自動 DOM クリーンアップ を実行しないことに注意してください。

モジュールをモックする

Jest でモジュールをモックする場合、ファクトリ関数の引数の戻り値はデフォルトのエクスポートとして扱われます。Vitest では、ファクトリ関数の引数は、各エクスポートが明示的に定義されたオブジェクトを返す必要があります。例えば、次の jest.mock は、次のように更新する必要があります。

- jest.mock('./some-path', () => 'hello')
+ vi.mock('./some-path', () => ({
+   default: 'hello',
+ })

詳細については、vi.mock API セクション を参照してください。

自動モックの挙動

Jest とは異なり、<root>/__mocks__ 内のモック化されたモジュールは、vi.mock() が呼び出されるまでロードされません。Jest のように、すべてのテストでモックする必要がある場合は、setupFiles 内でモックを設定できます。

モック化されたパッケージのオリジナルをインポートする

パッケージを部分的にモックする場合、以前は Jest の関数 requireActual を使用していたかもしれません。Vitest では、これらの呼び出しを vi.importActual に置き換える必要があります。

- const { cloneDeep } = jest.requireActual('lodash/cloneDeep')
+ const { cloneDeep } = await vi.importActual('lodash/cloneDeep')

環境変数

Jest と同様に、Vitest は、設定されていない場合、NODE_ENV を test に設定します。Vitest には、JEST_WORKER_ID に対応する VITEST_POOL_ID もあります（常に maxThreads 以下）。これを使用している場合は、名前を変更してください。Vitest は、実行中のワーカーのユニーク ID である VITEST_WORKER_ID も公開します。この数値は maxThreads の影響を受けず、作成されたワーカーごとに増加します。

環境変数を変更する場合、Jest で replaceProperty API を使用していた場合、Vitest では vi.stubEnv を使用して同様の操作が可能です。

Done コールバック関数

Vitest v0.10.0 以降、テストを宣言する際のコールバック形式は非推奨となりました。async/await 関数を使用するように書き換えるか、Promise を使用してコールバック スタイルを模倣できます。

- it('should work', (done) => {
+ it('should work', () => new Promise(done => {
    // ...
    done()
- })
+ }))

フック関数

beforeAll/beforeEach フック関数は、Vitest で teardown 関数 を返す場合があります。そのため、undefined または null 以外の値を返す場合は、フックの宣言を変更する必要があるかもしれません。

- beforeEach(() => setActivePinia(createTestingPinia()))
+ beforeEach(() => { setActivePinia(createTestingPinia()) })

型

Vitest の Vi 名前空間では、多くの型が公開されていません。これは主にマッチャーとの互換性のためのものであり、Vi 名前空間に依存するのではなく、vitest から直接型をインポートする必要がある場合があります。

- let fn: jest.Mock<string, [string]>
+ import type { Mock } from 'vitest'
+ let fn: Mock<[string], string>

また、差分で示されているように、Vitest では Returns ではなく、最初の引数として Args 型を使用します。

タイマー

Vitest は、Jest のレガシータイマーをサポートしていません。

Vue のスナップショットテスト

これは Jest 特有の機能ではありませんが、以前に vue-cli プリセットで Jest を使用していた場合は、jest-serializer-vue パッケージをインストールし、setupFiles 内で使用する必要があります。

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    setupFiles: ['./tests/unit/setup.js'],
  },
});

tests/unit/setup.js

import vueSnapshotSerializer from 'jest-serializer-vue';

expect.addSnapshotSerializer(vueSnapshotSerializer);

そうしないと、スナップショット内の " が多数エスケープされて表示されます。