Vitest UIを使ってみよう！
TL;DR
前回はテストコードでよく使うであろうMock, Testing Typesについての記事でした。
今回はVitest UIについて紹介したいと思います。
What's Vitest UI
テストの実行やテスト結果の表示を Web ブラウザ上で可能とするための機能です。
利用するテストコード
前回の記事時点終了時点でのこちらのコードを利用します。
export const getLabel = (name: string, age: number) => {
return `名前は${name}で年齢は${age}歳です`
}
import { afterEach, describe, expectTypeOf, assertType, it, vi } from 'vitest'
import { getLabel } from "./test"
describe(`Testing Types`, () => {
afterEach(() => {
vi.restoreAllMocks()
})
it(`関数であるかどうかと、引数の型を検証する`, () => {
//! 関数であるかどうか
expectTypeOf(getLabel).toBeFunction()
//! 引数の型を検証する
expectTypeOf(getLabel).parameter(0).toMatchTypeOf<string>()
expectTypeOf(getLabel).parameter(1).toMatchTypeOf<number>()
//! まとめて検証
assertType(getLabel('名前', 1))
})
})
インストール
Vitest UI は Vitest の拡張機能であるため、別途インストールが必要です。
npm i -D @vitest/ui
インストールが完了したら、次のコマンドを実行します。
npx vitest --ui
ブラウザに以下のような画面が表示されれば OK です。
以降では Vitest UI の各機能について確認していきます。
Dashboard
テスト結果を確認することができます。
左ペインの検索バーから、特定のテストファイルを検索することが可能です。
Dashboard の状態で ▷ ボタンを押下すると、すべてのテストファイルが実行されます。
各テストファイル単位
左ペインのテストファイルをクリックすることで、各テストファイルごとにさまざまな情報を確認することができます。
また中央ペインの検索バーに入力することで、ファイル内部のテスト項目を絞り込むことが可能です。
Report
テストファイル単位でのテスト結果を表示しています。
エラーがある場合はこのように期待値と実値がなんであるかを表示しつつ、エラー内容を教えてくれます。
Module Graph
モジュール同士の依存関係を視覚的に確認することが可能です。
Code
Vitest UI 上でテストコードを確認・編集・保存することが可能です。
Console
console.log()があった場合に、いつ・どのテスト項目で・どのような値が出力されているのかを確認することができます。
ダークモード
余談ですが、ダークモードの設定も可能です。
おわりに
エラー内容やconsole.log()の内容がすごくみやすく、テスト単位での結果の絞り込みも可能なので、是非ともインストールして活用したいと思いました。
この記事をもって、一旦 Vitest シリーズはおしまいです。
最後までお読みいただきましてありがとうございました。
メンバー募集中！
サーバーサイド Kotlin コミュニティを作りました！
Kotlin ユーザーはぜひご参加ください！！
また関西在住のソフトウェア開発者を中心に、関西エンジニアコミュニティを一緒に盛り上げてくださる方を募集しています。
よろしければ Conpass からメンバー登録よろしくお願いいたします。
Discussion