先日VitestにこちらのPull Requestがマージされ、Vitest Browser ModeでVisual Regression Test（VRT）ができるようになりました（まだ正式リリースはされていません）。
おそらくVitest v4のリリースで正式に使えるようになりますが、beta versionで実際に試すことができるので試してみました。
デモ
デモ用のコードはこちらのRepositoryにあります（ProviderはPlaywrightを使用しています）。vitest.configなどの設定は従来のbrowser modeの設定と全く同じで問題ないです。Vitestのバージョンは4.0.0-beta.7を使用しています。
expectの引数にElementを渡し、toMatchScreenshotを実行することでVRTができます。以下は実際のコードと生成された画像です。
snapshotに差分ができるとテストがfailし、以下のようなディレクトリにdiff画像などが出力されます。PlaywrightのようにreportをWeb上で見ることはできません。
オプションで許容する差分などを指定することができます。今のところvitest.configなどで一括で指定することはできなさそうです（Extending Matchersを使用すればできると思いますが）。
toMatchScreenshotの内部実装
内部ではPlaywrightのscreenshotでスクリーンショットを撮り、pixelmatchで画像を比較しているようです。
実務での活用について
これまでPlaywrightなどで行っていたVRTがVitestで行えるようになり、とても気軽にVRTをすることができるようになりました。しかし、VRTはFlakyになりがちな点、環境の差異をDockerなどで吸収する必要がある点などを考慮すると、そうバンバンVRTを増やすのは後々辛くなることが予想されます。そのため、VRTで保証したい品質を定義し、必要な範囲でのみ使用することが必要となります。
そうかつ
実務で使用するかは判断が必要ですが、純粋にVitest Browser ModeでVRTができるようになってめでたいですね🎉
自分もVitest Browser ModeにVRTのアサーションを生やそうと2ヶ月前くらいに思ってできていなかったのでVitest v4でリリースされるのが楽しみです（エディターのような複雑なところのUnitテストで使用したいと思っていた）。
Views: 0
