StorybookとVitestを連携して実行する

StorybookとVitestを連携して Play関数に記載されたテストケースを実行する方法

うまく活用すれば通常のロジックのテストと同じくUIコンポーネントのテストを自動実行できるようになる

テスト用の関数は Vitestと同じ様式で @storybook/test から提供され、Jest のAPIとも類似性が高く、jest-domから提供されるDOM検証用の機能も合わせて使用できる

デフォルトではPlaywrightを経由してブラウザを実際のテストに使用することができ、それが推奨される。一方で軽量で高速に自動テストを実行できるようjsdomやhappy-domなどの仮想環境を選択して実行することもできる

TIPS

ドキュメント内に要素が存在することを確認する

code:js

// ドキュメント内に「ELEMENT_A」が存在すること

await expect(canvas.getByTestId("ELEMENT_A")).toBeInTheDocument();

// ドキュメント内に「ELEMENT_B」が存在しないこと

await expect(canvas.queryByTestId("ELEMENT_B")).not.toBeInTheDocument();

ボタンが無効化されていることを確認する

code:js

const btnSubmit = canvas.getByTestId<HTMLButtonElement>("TARGET");

// 要素が disabled になっていること

await expect(btnSubmit).toBeDisabled();

// aria-disabled が指定されていること

await expect(btnSubmit).toHaveAttribute("aria-disabled");

既知の問題

ブラウザーモードを使わない設定が効かない

Storybook 8.4で修正済み

test.browser.enabled: falseとenvironment: "happy-dom" を指定しているにも関わらずブラウザーテストを行おうとして以下のようなエラーになる場合がある。

Error: @vitest/browser/context can be imported only inside the Browser Mode. Your test is running in forks pool. Make sure your regular tests are excluded from the "test.include" glob pattern.

既知の問題で vitest@2.1.2 及び @vitest/browser@2.1.2 以降に不具合があるようなので、 vitest@2.1.1 と @vitest/browser@2.1.1 を使用すればよい