スピーカー

現代のフロントエンド開発において、コンポーネントのテストは非常に重要です。しかし、テストを実行するためにブラウザ機能をエミュレートする jsdom や happy-dom などのライブラリには限界があります。そんな中、Vitest の Browser Mode はこれらの課題を解決する可能性を持っています。 私は Vitest + happy-dom の構成でコンポーネントのテストを書く機会がありました。その中で happy-dom の足りていない機能やバグ (ブラウザとの挙動の差分) を見つけ、issue を立てたりプルリクを作成したりしました。 jsdom や happy-dom は大変素晴らしい OSS で、フロントエンドのテストには必要不可欠なものです。しかしこの経験を通じてブラウザの機能のエミュレートを通じてテストを実装するのに限界があるのでは？と考えるようになりました。 具体的には、現代のブラウザは大量の機能や仕様を持ち大変複雑なことが知られています。さらに年々新しい Web API は追加され続けます。エミュレータの実装であってもこれらをカバーし毎年の Web のアップデートに対応するのはコストが大きい作業です。 この問題を解決する方法として Vitest Browser Mode に私は期待をしています。現在は Experimental な機能ですが、本物のブラウザを使用するので既存の機能と挙動が異なることや、新しい API がまだ実装されていない、ということがなくなります。これによりテストを書いている開発者はよりコンポーネントの実装やテストにフォーカスすることができます。 このライトニングトークでは、ブラウザのエミュレートの限界の実例を紹介し、Vitest Browser Mode の仕組みやその期待を参加者に共有します。