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

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

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