アサーション API

Vitest は、@testing-library/jest-dom ライブラリをバンドルしており、すぐに利用できる豊富な DOM アサーションを提供しています。詳細なドキュメントについては、jest-dom の README を参照してください。

TypeScript を使用している場合、または expect で適切な型ヒントを取得したい場合は、使用しているプロバイダーに応じて、tsconfig に @vitest/browser/providers/playwright または @vitest/browser/providers/webdriverio を指定していることを確認してください。デフォルトの preview プロバイダーを使用している場合は、代わりに @vitest/browser/matchers を指定できます。

previewplaywrightwebdriverio

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/matchers"]
  }
}

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}

ブラウザでのテストは、非同期の特性により、不安定になる可能性があります。このため、条件の判定が遅延する場合（タイムアウト、ネットワークリクエスト、アニメーションなど）でも、アサーションが成功することを保証する手段を持つことが重要です。この目的のために、Vitest は expect.poll および expect.element API を通じて、すぐに利用できるリトライ可能なアサーションを提供しています。

import { expect, test } from 'vitest';
import { page } from '@vitest/browser/context';

test('error banner is rendered', async () => {
  triggerError();

  // @testing-library は、組み込みのリトライ機能を持つクエリを提供します
  // バナーがレンダリングされるまで検索を試みます
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest は、組み込みのリトライ機能を持つ `expect.element` を提供します
  // `element.textContent` が "Error!" と等しくなるまでチェックします
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element は expect.poll(() => element) の省略形であり、全く同じ動作をします。

toHaveTextContent およびその他の @testing-library/jest-dom アサーションは、リトライ機構なしで通常の expect でも利用できます。

// .textContent が `'Error!'` でない場合、すぐに失敗します
expect(banner).toHaveTextContent('Error!');

アサーション API ​

アサーション API