Vitest Browser Mode が凄い
Vitest Browser Mode とは
Vitest Browser Mode（ブラウザモード）とは、2025/1/31 現在 Experimental として公開されている Vitest の API で、ブラウザ上でテストを実行できる機能のことです。
ブラウザ上で実行可能になったことで必要なモックを最小限に、実際に操作される環境と同じ環境でテストをすることができます。
実際に試してみた内容をこの記事では紹介します。
試してみた
通常のテストと Browser Mode のテストをそれぞれ作成し、比較してみました。
具体的には、テストコードのモックの有無を比較したかったため、ボタンを押下すると window.scrollTo() でスクロールするだけの簡単なアプリを作成し、そのテストコードを記述しました。
アプリの画面はこちらです。
試してみたコードはこちらです。
ライブラリのインストール
$ pnpm create vite で Vue, TypeScript の環境を立ち上げた後、以下のライブラリを devDependencies としてインストールしました。
$ pnpm add -D vitest happy-dom @vitest/browser @testing-library/vue vitest-browser-vue playwright
アプリの実装
前述した通り、ボタンを押下すると window.scrollTo() でスクロールするだけの簡単なアプリです。
Vitest の設定
Vitest には Workspace という複数のテストプロジェクトごとに設定を実施する方法があるので、こちらを使って通常のテストと Browser Mode のテストをそれぞれ設定するようにしました。
テストコードの記述
通常のテスト
Happy DOM を使った一般的なテストコードです。
window.scrollTo() による実際のスクロールの動きを Happy DOM や JSDOM 上でテストをすることは難しいため、モック化で呼び出しの引数が適切に設定されているかどうかをテストしています。
このテストだと実際の挙動をテストしている訳ではないので少し信頼性に不安が残ります。
Browser Mode のテスト
本題の Browser Mode のテストです。
コードを見て分かるように、通常の Vitest のテストコードの書き方とは異なります。
window.scrollTo()document.body.scrollHeightwindow.scrollY
などのブラウザ API が有効になっていることで実際の挙動がテストでき、直感的なテストコードを書くことができるようになっていることが分かります。
$ npx vitest を実行してみると...
ブラウザ上でテストを実行してくれました。
その他
ヘッドレスブラウザでのテストも実行可能です。
$ npx vitest --browser.headless
感想
ブラウザ上でテストできるようになったことで、信頼性の高いテストの実施と実態に沿った分かりやすいテストの記述ができるようになったと感じました。
大量のテストコードに対して Browser Mode でテストを実施した際の実行時間が気になりますが、かなり期待できる機能なのではないかと個人的には感じております。
Browser Mode は現在まだ Experimental で バグを含んでいる可能性があり API の仕様も安定していないため、安定したバージョンのリリースが待ち遠しいです。
Discussion