フロントエンドのテストを強化する@vitest/ui

LT：フロントエンドのテストを強化するVitest UI
株式会社hacomono フロントエンドエンジニア
Isamu Takemoto / 竹本勇

Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜
https://hireroo.connpass.com/event/297090/

Transcript

1. フロントエンドのテストを強化する@vitest/ui 株式会社hacomono 開発本部POSグループ所属 竹本 勇
2. 自己紹介 Isamu Takemoto / X(twitter): @takeisaa 株式会社hacomono フロントエンドエンジニア 開発本部POS グループ所属 hacomonoに連動するPOSシステムの開発をしています プライベート：映画鑑賞 / 子供と遊ぶ / 筋肉と遊ぶ 竹本 勇（たけ）
5. お話しすること • 導入してよかったOSS @vitest/ui について • 導入に至った背景 • 主な機能と便利なポイント
6. 導入してよかったOSS @vitest/ui について
7. 導入してよかったOSS @vitest/ui について Vitest とは • Vite 環境で動く Unit Testing のフレームワーク • Jestに代わる新しいテスティングフレームワーク • 動作が高速で快適です！ Vitest https://vitest.dev/features.html（参照2023-10-30）
8. 導入してよかったOSS @vitest/ui について @vitest/ui とは • Vitest の拡張機能 • CLIだけでなくWeb ブラウザ上でテスト実行やテスト結果の表示を確認する ことができる • テストの修正もブラウザ上でできる Vitest https://vitest.dev/ui.html（参照2023-10-30）
9. 導入してよかったOSS @vitest/ui について テスト結果 CLI
10. 導入してよかったOSS @vitest/ui について テスト結果 @vitest/ui（ダッシュボード）
11. 導入に至った背景
12. 導入に至った背景 Nuxt3で開発しているプロダクトの機能も増えてきて開発、リファクタが辛くなってきました 安心安全に開発するために Vitestを導入し、チームでテストを書いていこうという空気になりました この状況でテストを書きやすくするために @vitest/ui も一緒に導入してみました
13. 主な機能と便利なポイント
14. 主な機能と便利なポイント • ダッシュボード • Report • Module Graph • Code • Console • テストカバレッジ
15. 主な機能と便利なポイント ダッシュボード テスト結果を確認することができます 左の検索バーから特定のテストファイルを検索することもできます
16. 主な機能と便利なポイント Report 左のテストファイルをクリックすると各テストファイルごとに情報を確認することができます テストファイル内のテスト項目ごとに検索することもできます
17. 主な機能と便利なポイント Report エラーの場合はエラー箇所、期待値、実値がなんであるかを教えてくれます
18. 主な機能と便利なポイント テストの修正 code タブでブラウザ上でテストコードを修正することができます 修正内容はコードにも自動即時反映されます
19. 主な機能と便利なポイント テストデータの確認 Console タブでコンソールログした内容をブラウザ上で確認することができます テストデータの確認にとても便利です
20. 主な機能と便利なポイント テストデータの確認 Console タブでコンソールログした内容をブラウザ上で確認することができます テストデータの確認にとても便利です
21. 主な機能と便利なポイント Module Graph テスト対象のコードが何を importしているかの依存関係を視覚的に確認できます
22. 主な機能と便利なポイント テストカバレッジ ブラウザ上でカバレッジ レポートを確認できます
23. まとめ • ブラウザに即時反映されグラフィカルで見やすい • ホットリロードが便利 • テストを書いたロジックを改修する際に立ち上げておくとエラー検知しやすい チームでテストを書くストレスが軽減されテスト拡充が進んでいます！