テスト: Vitest 4 の Browser Mode でビジュアルリグレッションテスト（VRT）を始める

手順の概要

1. Browser Mode を有効にする（provider は Playwright など）
2. テストでコンポーネントを描画し、要素のスクリーンショットを基準画像と比べる（toMatchScreenshot 系のマッチャー）
   ts

   import { page } from "vitest/browser";   // import 元はバージョンで異なる
   test("Hero の見た目", async () => {
     render(<Hero />);
     await expect.element(page.getByTestId("hero")).toMatchScreenshot();
   });

3. 初回実行で基準画像を作り、意図した変更のときは更新オプション（-u）で基準を更新する
4. CI（GitHub Actions）でも同じブラウザ・同じ OS イメージで実行する

注意点

• フォントのレンダリングは OS で違うので、基準画像は CI と同じ環境（Docker イメージなど）で作る。ローカルとの差でテストが不安定になりやすい。
• アニメーション・現在時刻・乱数は止めるか固定する。
• 設定項目名・import 元は Vitest のバージョンで変わるので、公式ドキュメント（Browser Mode / Visual Regression Testing）で確認すること。

出典

• @zenn_dev 2026-07-09（Zenn 記事の紹介）: @zenn_dev · 2026-07-09