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