Vi

Vitest は、vi ヘルパーを通じて、便利なユーティリティ関数を提供します。グローバルにアクセス可能です（globals configuration が有効な場合）。または、vitest からインポートすることもできます。

import { vi } from 'vitest';

vi.advanceTimersByTime

型: (ms: number) => Vitest
runAllTimers と同様に動作しますが、指定されたミリ秒経過後に処理を終了します。例えば、以下のコードは 1, 2, 3 をログに出力し、エラーは発生しません。
ts
```
let i = 0;
setInterval(() => console.log(++i), 50);

vi.advanceTimersByTime(150);
```

vi.advanceTimersByTimeAsync

型: (ms: number) => Promise<Vitest>
runAllTimersAsync と同様に動作しますが、指定されたミリ秒経過後に処理を終了します。非同期的に設定されたタイマーも対象となります。例えば、以下のコードは 1, 2, 3 をログに出力し、エラーは発生しません。
ts
```
let i = 0;
setInterval(() => Promise.resolve().then(() => console.log(++i), 50);

await vi.advanceTimersByTimeAsync(150);
```

vi.advanceTimersToNextTimer

型: () => Vitest
次に実行されるタイマーを呼び出します。各タイマー呼び出しの間にアサーションを行う場合に便利です。メソッドチェーンで呼び出すことで、タイマーの実行を細かく制御できます。
ts
```
let i = 0;
setInterval(() => console.log(++i), 50);

vi.advanceTimersToNextTimer() // log 1
  .advanceTimersToNextTimer() // log 2
  .advanceTimersToNextTimer(); // log 3
```

vi.advanceTimersToNextTimerAsync

型: () => Promise<Vitest>
非同期的に設定されたタイマーも含め、次に実行されるタイマーを呼び出します。各タイマー呼び出しの間にアサーションを行う場合に便利です。メソッドチェーンで呼び出すことで、タイマーの実行を細かく制御できます。
ts
```
let i = 0;
setInterval(() => Promise.resolve().then(() => console.log(++i), 50);

vi.advanceTimersToNextTimerAsync() // log 1
  .advanceTimersToNextTimerAsync() // log 2
  .advanceTimersToNextTimerAsync(); // log 3
```

vi.getTimerCount

型: () => number
現在実行待ちのタイマーの数を取得します。

vi.clearAllMocks

すべてのスパイオブジェクトに対して .mockClear() を呼び出します。これにより、モックの呼び出し履歴はクリアされますが、実装はデフォルトの状態にリセットされません。

vi.clearAllTimers

実行がスケジュールされているすべてのタイマーを削除します。削除されたタイマーは、今後実行されることはありません。

vi.dynamicImportSettled

すべての動的インポートが完了するのを待ちます。モジュールのインポートを開始する同期的な処理があり、その完了を待機する必要がある場合に便利です。

vi.fn

型: (fn?: Function) => Mock
関数のスパイオブジェクトを作成します。引数に関数を指定せずに作成することも可能です。関数が呼び出されるたびに、その引数、戻り値、およびインスタンスが記録されます。また、methods を使用してその動作を操作することもできます。関数が指定されていない場合、モックは呼び出されると undefined を返します。
ts
```
const getApples = vi.fn(() => 0);

getApples();

expect(getApples).toHaveBeenCalled();
expect(getApples).toHaveReturnedWith(0);

getApples.mockReturnValueOnce(5);

const res = getApples();
expect(res).toBe(5);
expect(getApples).toHaveNthReturnedWith(2, 5);
```

vi.getMockedSystemTime

型: () => Date | null
setSystemTime を使用して設定された、モックされた現在の日付を返します。日付がモックされていない場合は、null を返します。

vi.getRealSystemTime

型: () => number
vi.useFakeTimers を使用すると、Date.now の呼び出しがモックされます。ミリ秒単位で実際の時間を取得する必要がある場合は、この関数を呼び出すことができます。

vi.hoisted

型: <T>(factory: () => T) => T
バージョン: Vitest 0.31.0 以降
ES モジュールでは、すべての静的な import 文がファイルの先頭に巻き上げられる（ホイストされる）ため、インポート文よりも前に記述されたコードは、実際にはインポート文の評価後に実行されます。
しかし、モジュールをインポートする前に、日付のモックなど、何らかの副作用を伴う処理を実行したい場合があります。
この制限を回避するには、静的なインポートを動的なインポートに書き換えることができます。
diff
```
callFunctionWithSideEffect()
- import { value } from './some/module.ts'
+ const { value } = await import('./some/module.ts')
```
vitest を実行する場合、vi.hoisted メソッドを使用すると、この処理を自動的に行うことができます。
diff
```
- callFunctionWithSideEffect()
import { value } from './some/module.ts'
+ vi.hoisted(() => callFunctionWithSideEffect())
```
このメソッドは、ファクトリ関数から返された値を返します。ローカルで定義された変数に簡単にアクセスする必要がある場合は、vi.mock のファクトリ関数内でその値を使用できます。
ts
```
import { expect, vi } from 'vitest';
import { originalMethod } from './path/to/module.js';

const { mockedMethod } = vi.hoisted(() => {
  return { mockedMethod: vi.fn() };
});

vi.mock('./path/to/module.js', () => {
  return { originalMethod: mockedMethod };
});

mockedMethod.mockReturnValue(100);
expect(originalMethod()).toBe(100);
```

vi.mock

型: (path: string, factory?: () => unknown) => void
指定された path からインポートされるすべてのモジュールを、別のモジュールに置き換えます。パスには、Vite の設定で定義されたエイリアスを使用できます。vi.mock の呼び出しはホイストされるため、どこで呼び出しても、常にすべてのインポート文の前に実行されます。スコープ外の変数を参照する必要がある場合は、vi.hoisted 内でそれらを定義し、vi.mock 内で参照してください。
WARNING
vi.mock は、import キーワードでインポートされたモジュールに対してのみ有効です。require では動作しません。
Vitest は、vi.mock をホイストするためにファイルを静的に解析します。つまり、vitest パッケージから直接インポートされなかった vi (例えば、ユーティリティファイルからインポートされた場合) は使用できません。これを修正するには、常に vitest からインポートされた vi で vi.mock を使用するか、globals 設定オプションを有効にしてください。
WARNING
モジュールのモックは、現在 browser mode ではサポートされていません。GitHub の issue でこの機能の進捗状況を追跡できます。
factory が定義されている場合、すべてのインポート文はその結果を返します。Vitest はファクトリ関数を 1 回だけ呼び出し、vi.unmock または vi.doUnmock が呼び出されるまで、以降のすべてのインポート文に対してその結果をキャッシュします。
jest とは異なり、ファクトリ関数は非同期にすることができます。そのため、vi.importActual または最初の引数として受け取ったヘルパー関数を内部で使用して、元のモジュールを取得できます。
ts
```
vi.mock('./path/to/module.js', async importOriginal => {
  const mod = await importOriginal();
  return {
    ...mod,
    // replace some exports
    namedExport: vi.fn(),
  };
});
```
WARNING
vi.mock は、ファイルの先頭にホイストされます (言い換えれば、移動されます)。つまり、どこに記述しても (beforeEach または test の内部でも)、実際にはそれらの前に呼び出されます。
これは、ファクトリ関数の外部で定義された変数を、ファクトリ関数内で使用できないことも意味します。
ファクトリ関数内で変数を使用する必要がある場合は、vi.doMock を試してください。これは同じように機能しますが、ホイストされません。ただし、後続のインポート文のみをモックすることに注意してください。
vi.hoisted メソッドによって定義された変数は、vi.mock の前に宣言されている場合に限り、参照できます。
ts
```
import { namedExport } from './path/to/module.js';

const mocks = vi.hoisted(() => {
  return {
    namedExport: vi.fn(),
  };
});

vi.mock('./path/to/module.js', () => {
  return {
    namedExport: mocks.namedExport,
  };
});

vi.mocked(namedExport).mockReturnValue(100);

expect(namedExport()).toBe(100);
expect(namedExport).toBe(mocks.namedExport);
```
WARNING
デフォルトエクスポートでモジュールをモックしている場合は、返されるファクトリ関数オブジェクト内に default キーを指定する必要があります。これは ES モジュール固有の注意点です。jest は CommonJS モジュールを使用するため、jest のドキュメントとは異なる場合があります。例えば、
ts
```
vi.mock('./path/to/module.js', () => {
  return {
    default: { myDefaultKey: vi.fn() },
    namedExport: vi.fn(),
    // etc...
  };
});
```
モック対象のファイルの横に __mocks__ フォルダがあり、ファクトリ関数が指定されていない場合、Vitest は __mocks__ サブフォルダ内に同じ名前のファイルを探し、それをモジュールとして使用しようとします。依存関係をモックしている場合、Vitest はプロジェクトの root (デフォルトは process.cwd()) に __mocks__ フォルダを探そうとします。deps.moduleDirectories 設定オプションを使用して、依存関係の場所を Vitest に伝えることができます。
例えば、次のファイル構造があるとします。
```
- __mocks__
  - axios.js
- src
  __mocks__
    - increment.js
  - increment.js
- tests
  - increment.test.js
```
ファクトリ関数を指定せずにテストファイルで vi.mock を呼び出すと、モジュールとして __mocks__ フォルダ内のファイルが使用されます。
ts
```
// increment.test.js
import { vi } from 'vitest';

// axios is a default export from `__mocks__/axios.js`
import axios from 'axios';

// increment is a named export from `src/__mocks__/increment.js`
import { increment } from '../increment.js';

vi.mock('axios');
vi.mock('../increment.js');

axios.get(`/apples/${increment(1)}`);
```
WARNING
vi.mock を呼び出さない場合、モジュールは自動的にモックされないことに注意してください。Jest の自動モックの動作を再現するには、setupFiles 内で必要な各モジュールに対して vi.mock を呼び出すことができます。
__mocks__ フォルダまたはファクトリ関数が指定されていない場合、Vitest は元のモジュールをインポートし、そのすべてのエクスポートを自動的にモックします。適用されるルールについては、algorithm を参照してください。

vi.doMock

型: (path: string, factory?: () => unknown) => void
vi.mock と同じですが、ファイルの先頭にホイストされないため、グローバルファイルスコープ内の変数を参照できます。モジュールの次の dynamic import がモックされます。これは、この関数が呼び出される前にインポートされたモジュールはモックされないことを意味します。

// ./increment.js
export function increment(number) {
  return number + 1;
}

import { beforeEach, test } from 'vitest';
import { increment } from './increment.js';

// the module is not mocked, because vi.doMock is not called yet
increment(1) === 2;

let mockedIncrement = 100;

beforeEach(() => {
  // you can access variables inside a factory
  vi.doMock('./increment.js', () => ({ increment: () => ++mockedIncrement }));
});

test('importing the next module imports mocked one', async () => {
  // original import WAS NOT MOCKED, because vi.doMock is evaluated AFTER imports
  expect(increment(1)).toBe(2);
  const { increment: mockedIncrement } = await import('./increment.js');
  // new dynamic import returns mocked module
  expect(mockedIncrement(1)).toBe(101);
  expect(mockedIncrement(1)).toBe(102);
  expect(mockedIncrement(1)).toBe(103);
});

vi.mocked

型: <T>(obj: T, deep?: boolean) => MaybeMockedDeep<T>
型: <T>(obj: T, options?: { partial?: boolean; deep?: boolean }) => MaybePartiallyMockedDeep<T>
TypeScript の型ヘルパーです。実際には、渡されたオブジェクトをそのまま返します。
partial が true の場合、Partial<T> が戻り値として期待されます。
ts
```
import example from './example.js';

vi.mock('./example.js');

test('1+1 equals 2', async () => {
  vi.mocked(example.calc).mockRestore();

  const res = example.calc(1, '+', 1);

  expect(res).toBe(2);
});
```

vi.importActual

型: <T>(path: string) => Promise<T>
モジュールをインポートし、モックする必要があるかどうかのチェックをすべてバイパスします。モジュールを部分的にモックする場合に役立ちます。
ts
```
vi.mock('./example.js', async () => {
  const axios = await vi.importActual('./example.js');

  return { ...axios, get: vi.fn() };
});
```

vi.importMock

型: <T>(path: string) => Promise<MaybeMockedDeep<T>>
すべてのプロパティ (ネストされたプロパティを含む) がモックされたモジュールをインポートします。vi.mock が従うのと同じルールに従います。適用されるルールについては、algorithm を参照してください。

vi.resetAllMocks

すべてのスパイオブジェクトに対して .mockReset() を呼び出します。これにより、モックの呼び出し履歴がクリアされ、実装が空の関数 ( undefined を返す関数) にリセットされます。

vi.resetConfig

型: RuntimeConfig
vi.setConfig が以前に呼び出された場合、設定を元の状態にリセットします。

vi.resetModules

型: () => Vitest

すべてのモジュールのキャッシュをクリアして、モジュールレジストリをリセットします。これにより、モジュールが再度インポートされる際に再評価されるようになります。トップレベルのインポートは再評価できません。ローカルの状態がテスト間で競合するモジュールを分離するのに役立つ場合があります。

import { vi } from 'vitest';

import { data } from './data.js'; // Will not get reevaluated beforeEach test

beforeEach(() => {
  vi.resetModules();
});

test('change state', async () => {
  const mod = await import('./some/path.js'); // Will get reevaluated
  mod.changeLocalState('new value');
  expect(mod.getLocalState()).toBe('new value');
});

test('module has old state', async () => {
  const mod = await import('./some/path.js'); // Will get reevaluated
  expect(mod.getLocalState()).toBe('old value');
});

WARNING

モックの登録情報はリセットされません。モックレジストリをクリアするには、vi.unmock または vi.doUnmock を使用します。

vi.restoreAllMocks

すべてのスパイオブジェクトに対して .mockRestore() を呼び出します。これにより、モックの呼び出し履歴がクリアされ、実装が元の状態にリセットされます。

vi.stubEnv

型: (name: string, value: string) => Vitest
バージョン: Vitest 0.26.0 以降
process.env および import.meta.env の環境変数の値を変更します。vi.unstubAllEnvs を呼び出すことで、変更した値を元の値に戻すことができます。

import { vi } from 'vitest';

// `process.env.NODE_ENV` and `import.meta.env.NODE_ENV`
// are "development" before calling "vi.stubEnv"

vi.stubEnv('NODE_ENV', 'production');

process.env.NODE_ENV === 'production';
import.meta.env.NODE_ENV === 'production';
// doesn't change other envs
import.meta.env.MODE === 'development';

TIP

値を直接代入することによって変更することもできますが、vi.unstubAllEnvs を使用して以前の値を復元することはできません。

import.meta.env.MODE = 'test';

vi.unstubAllEnvs

タイプ: () => Vitest
バージョン: 0.26.0 以降
vi.stubEnv で変更されたすべての import.meta.env および process.env の値を元の値に復元します。Vitest は、最初に vi.stubEnv が呼び出された時点での値を保持し、vi.unstubAllEnvs が呼び出されるまでその値を保持します。

import { vi } from 'vitest';

// `process.env.NODE_ENV` と `import.meta.env.NODE_ENV` は
// stubEnv を呼び出す前は "development" です

vi.stubEnv('NODE_ENV', 'production');

process.env.NODE_ENV === 'production';
import.meta.env.NODE_ENV === 'production';

vi.stubEnv('NODE_ENV', 'staging');

process.env.NODE_ENV === 'staging';
import.meta.env.NODE_ENV === 'staging';

vi.unstubAllEnvs();

// 最初の "stubEnv" 呼び出しの前に保存された値 ("development") に復元されます
process.env.NODE_ENV === 'development';
import.meta.env.NODE_ENV === 'development';

vi.stubGlobal

タイプ: (name: string | number | symbol, value: unknown) => Vitest
グローバル変数の値を変更します。vi.unstubAllGlobals を呼び出すことで、元の値に復元できます。

import { vi } from 'vitest';

// `innerWidth` は stubGlobal を呼び出す前は "0" です

vi.stubGlobal('innerWidth', 100);

innerWidth === 100;
globalThis.innerWidth === 100;
// jsdom/happy-dom 環境の場合
window.innerWidth === 100;

TIP

globalThis または window (jsdom/happy-dom 環境の場合) に直接代入して値を変更することもできますが、その場合 vi.unstubAllGlobals を使用して元の値を復元することはできません。

globalThis.innerWidth = 100;
// jsdom/happy-dom 環境の場合
window.innerWidth = 100;

vi.unstubAllGlobals

タイプ: () => Vitest
バージョン: 0.26.0 以降
vi.stubGlobal で変更された globalThis/global (および window/top/self/parent、jsdom/happy-dom 環境の場合) のすべてのグローバル値を元の値に復元します。Vitest は、最初に vi.stubGlobal が呼び出された時点での値を保持し、vi.unstubAllGlobals が呼び出されるまでその値を保持します。

import { vi } from 'vitest';

const Mock = vi.fn();

// IntersectionObserver は "stubGlobal" を呼び出す前は "undefined" です

vi.stubGlobal('IntersectionObserver', Mock);

IntersectionObserver === Mock;
global.IntersectionObserver === Mock;
globalThis.IntersectionObserver === Mock;
// jsdom/happy-dom 環境の場合
window.IntersectionObserver === Mock;

vi.unstubAllGlobals();

globalThis.IntersectionObserver === undefined;
'IntersectionObserver' in globalThis === false;
// ReferenceError をスローします。定義されていないため
IntersectionObserver === undefined;

vi.runAllTicks

タイプ: () => Vitest
process.nextTick によってキューに追加されたすべてのマイクロタスクを実行します。これにより、それらによってスケジュールされたすべてのマイクロタスクも実行されます。

vi.runAllTimers

タイプ: () => Vitest
このメソッドは、タイマーキューが空になるまですべての開始されたタイマーを実行します。つまり、runAllTimers の実行中に呼び出されたすべてのタイマーが発火します。無限インターバルが設定されている場合、10,000 回試行した後でエラーが発生します。たとえば、次のコードは 1, 2, 3 をログに出力します。
ts
```
let i = 0;
setTimeout(() => console.log(++i));
const interval = setInterval(() => {
  console.log(++i);
  if (i === 3) clearInterval(interval);
}, 50);

vi.runAllTimers();
```

vi.runAllTimersAsync

タイプ: () => Promise<Vitest>
このメソッドは、タイマーキューが空になるまで、開始されたすべてのタイマーを非同期的に実行します。つまり、非同期タイマーも runAllTimersAsync の実行中に発火します。無限インターバルが設定されている場合、10,000 回試行した後でエラーが発生します。例えば、次のコードは result をログに出力します。
ts
```
setTimeout(async () => {
  console.log(await Promise.resolve('result'));
}, 100);

await vi.runAllTimersAsync();
```

vi.runOnlyPendingTimers

タイプ: () => Vitest
このメソッドは、vi.useFakeTimers() の呼び出し後に開始されたすべてのタイマーを実行します。その呼び出し中に開始されたタイマーは発火しません。たとえば、次のコードは 1 のみをログに出力します。
ts
```
let i = 0;
setInterval(() => console.log(++i), 50);

vi.runOnlyPendingTimers();
```

vi.runOnlyPendingTimersAsync

タイプ: () => Promise<Vitest>
このメソッドは、vi.useFakeTimers() の呼び出し後に開始されたすべてのタイマーを、非同期タイマーも含めて非同期的に実行します。このメソッドの実行中に開始されたタイマーは発火しません。例えば、次のコードは 2, 3, 3, 1 をログに出力します。
ts
```
setTimeout(() => {
  console.log(1);
}, 100);
setTimeout(() => {
  Promise.resolve().then(() => {
    console.log(2);
    setInterval(() => {
      console.log(3);
    }, 40);
  });
}, 10);

await vi.runOnlyPendingTimersAsync();
```

vi.setSystemTime

タイプ: (date: string | number | Date) => void
現在の日付を、指定された日付に設定します。以降のすべての Date 呼び出しは、この日付を返すようになります。
現在の日付に依存する処理をテストする必要がある場合に役立ちます。たとえば、コード内の luxon の呼び出しなどです。
ts
```
const date = new Date(1998, 11, 19);

vi.useFakeTimers();
vi.setSystemTime(date);

expect(Date.now()).toBe(date.valueOf());

vi.useRealTimers();
```

vi.setConfig

タイプ: RuntimeConfig
現在のテストファイルの構成を更新します。テストの実行時に使用される値のみに影響します。

vi.spyOn

タイプ: <T, K extends keyof T>(object: T, method: K, accessType?: 'get' | 'set') => MockInstance

オブジェクトのメソッドまたはゲッター/セッターにスパイを作成します。

let apples = 0;
const cart = {
  getApples: () => 13,
};

const spy = vi.spyOn(cart, 'getApples').mockImplementation(() => apples);
apples = 1;

expect(cart.getApples()).toBe(1);

expect(spy).toHaveBeenCalled();
expect(spy).toHaveReturnedWith(1);

vi.stubGlobal

タイプ: (key: keyof globalThis & Window, value: any) => Vitest
グローバル変数に値を設定します。jsdom/happy-dom 環境の場合、window オブジェクトにも値を設定します。
詳細については、"グローバル変数のモック" のセクションを参照してください。

vi.unmock

タイプ: (path: string) => void
モックされたレジストリからモジュールを削除します。インポートへのすべての呼び出しは、以前にモックされていた場合でも、元のモジュールを返します。この呼び出しは巻き上げ (ホイスティング) されるため、たとえば setupFiles で定義されたモジュールのみをモック解除します。

vi.doUnmock

タイプ: (path: string) => void
vi.unmock と同じですが、ファイルの先頭に巻き上げられません。モジュールの次のインポートは、モックではなく実際のモジュールをインポートします。これは、以前にインポートされたモジュールをモック解除しません。

// ./increment.js
export function increment(number) {
  return number + 1;
}

import { increment } from './increment.js';

// increment は vi.mock が巻き上げられるため、すでにモックされています
increment(1) === 100;

// これは巻き上げられ、1 行目のインポートの前にファクトリが呼び出されます
vi.mock('./increment.js', () => ({ increment: () => 100 }));

// すべての呼び出しがモックされ、`increment` は常に 100 を返します
increment(1) === 100;
increment(30) === 100;

// これは巻き上げられないため、他のインポートはモック解除されたモジュールを返します
vi.doUnmock('./increment.js');

// これは `vi.doUnmock` がモジュールを再評価しないため、依然として 100 を返します
increment(1) === 100;
increment(30) === 100;

// 次のインポートはモック解除され、`increment` は数値 + 1 を返す元の関数になりました
const { increment: unmockedIncrement } = await import('./increment.js');

unmockedIncrement(1) === 2;
unmockedIncrement(30) === 31;

vi.useFakeTimers

タイプ: () => Vitest
タイマーのモックを有効にするには、このメソッドを呼び出す必要があります。これにより、vi.useRealTimers() が呼び出されるまで、タイマー (setTimeout、setInterval、clearTimeout、clearInterval、nextTick、setImmediate、clearImmediate、および Date など) への以降のすべての呼び出しがラップされます。
--no-threads を使用して node:child_process 内で Vitest を実行している場合、nextTick のモックはサポートされていません。NodeJS は node:child_process 内で内部的に process.nextTick を使用し、モックされるとハングします。nextTick のモックは、--threads を使用して Vitest を実行している場合にサポートされます。
実装は、内部的に @sinonjs/fake-timers に基づいています。
TIP
バージョン 0.35.0 以降、vi.useFakeTimers() は process.nextTick を自動的にモックしなくなりました。 toFake 引数でオプションを指定することで、モックすることができます: vi.useFakeTimers({ toFake: ['nextTick'] })。

vi.isFakeTimers

タイプ: () => boolean
バージョン: 0.34.5 以降
フェイクタイマーが有効になっている場合は true を返します。

vi.useRealTimers

タイプ: () => Vitest
タイマーのモックを無効にするには、このメソッドを呼び出して、モックされたタイマーを元の実装に戻すことができます。以前に実行されたすべてのタイマーは復元されません。

vi.waitFor

タイプ: <T>(callback: WaitForCallback<T>, options?: number | WaitForOptions) => Promise<T>
バージョン: 0.34.5 以降

コールバックが正常に実行されるまで待機します。コールバックがエラーをスローした場合、または Promise がリジェクトされた場合、成功するかタイムアウトするまで待機を継続します。

これは、サーバーを起動して起動するのを待つ必要がある場合など、非同期アクションが完了するのを待つ必要がある場合に非常に役立ちます。

import { expect, test, vi } from 'vitest';
import { createServer } from './server.js';

test('Server started successfully', async () => {
  const server = createServer();

  await vi.waitFor(
    () => {
      if (!server.isReady) throw new Error('Server not started');

      console.log('Server started');
    },
    {
      timeout: 500, // デフォルトは 1000
      interval: 20, // デフォルトは 50
    }
  );
  expect(server.isReady).toBe(true);
});

非同期コールバックでも動作します

// @vitest-environment jsdom

import { expect, test, vi } from 'vitest';
import { getDOMElementAsync, populateDOMAsync } from './dom.js';

test('Element exists in a DOM', async () => {
  // DOM への入力の開始
  populateDOMAsync();

  const element = await vi.waitFor(
    async () => {
      // 要素が存在するまで取得を試みます
      const element = (await getDOMElementAsync()) as HTMLElement | null;
      expect(element).toBeTruthy();
      expect(element.dataset.initialized).toBeTruthy();
      return element;
    },
    {
      timeout: 500, // デフォルトは 1000
      interval: 20, // デフォルトは 50
    }
  );
  expect(element).toBeInstanceOf(HTMLElement);
});

vi.useFakeTimers が使用されている場合、vi.waitFor はすべてのチェックコールバックで vi.advanceTimersByTime(interval) を自動的に呼び出します。

vi.waitUntil

タイプ: <T>(callback: WaitUntilCallback<T>, options?: number | WaitUntilOptions) => Promise<T>
バージョン: 0.34.5 以降

これは vi.waitFor と似ていますが、コールバックがエラーをスローすると、実行はすぐに中断され、エラーメッセージが表示されます。コールバックが falsy な値を返した場合、truthy な値が返されるまで次のチェックを継続します。これは、次のステップに進む前に何かが存在するのを待つ必要がある場合に役立ちます。

以下の例をご覧ください。vi.waitUntil を使用して、要素がページに現れるのを待ってから、その要素に対して何らかの処理を行うことができます。

import { expect, test, vi } from 'vitest';

test('Element render correctly', async () => {
  const element = await vi.waitUntil(() => document.querySelector('.element'), {
    timeout: 500, // デフォルトは 1000
    interval: 20, // デフォルトは 50
  });

  // 要素に対して何かを行う
  expect(element.querySelector('.element-child')).toBeTruthy();
});

Vi ​

vi.advanceTimersByTime ​

vi.advanceTimersByTimeAsync ​

vi.advanceTimersToNextTimer ​

vi.advanceTimersToNextTimerAsync ​

vi.getTimerCount ​

vi.clearAllMocks ​

vi.clearAllTimers ​

vi.dynamicImportSettled ​

vi.fn ​

vi.getMockedSystemTime ​

vi.getRealSystemTime ​

vi.hoisted ​

vi.mock ​

vi.doMock ​

vi.mocked ​

vi.importActual ​

vi.importMock ​

vi.resetAllMocks ​

vi.resetConfig ​

vi.resetModules ​

vi.restoreAllMocks ​

vi.stubEnv ​

vi.unstubAllEnvs ​

vi.stubGlobal ​

vi.unstubAllGlobals ​

vi.runAllTicks ​

vi.runAllTimers ​

vi.runAllTimersAsync ​

vi.runOnlyPendingTimers ​

vi.runOnlyPendingTimersAsync ​

vi.setSystemTime ​

vi.setConfig ​

vi.spyOn ​

vi.stubGlobal ​

vi.unmock ​

vi.doUnmock ​

vi.useFakeTimers ​

vi.isFakeTimers ​

vi.useRealTimers ​

vi.waitFor ​

vi.waitUntil ​

Vi

vi.advanceTimersByTime

vi.advanceTimersByTimeAsync

vi.advanceTimersToNextTimer

vi.advanceTimersToNextTimerAsync

vi.getTimerCount

vi.clearAllMocks

vi.clearAllTimers

vi.dynamicImportSettled

vi.fn

vi.getMockedSystemTime

vi.getRealSystemTime

vi.hoisted

vi.mock

vi.doMock

vi.mocked

vi.importActual

vi.importMock

vi.resetAllMocks

vi.resetConfig

vi.resetModules

vi.restoreAllMocks

vi.stubEnv

vi.unstubAllEnvs

vi.stubGlobal

vi.unstubAllGlobals

vi.runAllTicks

vi.runAllTimers

vi.runAllTimersAsync

vi.runOnlyPendingTimers

vi.runOnlyPendingTimersAsync

vi.setSystemTime

vi.setConfig

vi.spyOn

vi.stubGlobal

vi.unmock

vi.doUnmock

vi.useFakeTimers

vi.isFakeTimers

vi.useRealTimers

vi.waitFor

vi.waitUntil