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