2022-05-31 Vue のテストについて
Vue のテストには 3種類ある。 Unit テスト、 Component テスト、 End-to-end テスト。
Unit テスト
Unit テストは想像通り。入力に対する出力 (output or side effects) を検証する。またそのためにモックを利用することが多々ある (initial state, complex classes, 3rd party modules, network requests など)。
通常のビジネスロジックの Unit テストをするにおいては、 Vue のアプリケーションでも他のフレームワークによるアプリケーションでも同様に行える。
しかし、次の２つのシチュエーションにおいては、 Vue 特有のテストを行う必要がある。ひとつは Composable (今日は扱わない)、もう一つは Component。
Component の Unit テストは White Box テストとして行う。様々なものをモックする。
Vue アプリケーションの Component のユニットテストにおいては、 Vite を使うのが良さげである。
Component テスト
一方で Component テスト (Integration テスト) については Black Box テストとして行う。子コンポーネントのモックは行わない。
ユーザ操作と同様にコンポーネントに変化を生じさせ、それによって引き起こされる親コンポーネントと子コンポーネント間の反応が予想通りかをテストする。
Black Box テストであるため、公開インターフェースのテストとなる。 Vue のコンポーネントにおける公開インターフェースとは、 events, emitted, props, slots の4つ。これらをテストする。
大事なのは、「How it does it」ではなく「What it does」である。
描画の Logic においては、 props や slots の入力に応じてどのような出力、描画がされるのかを確認する。
振る舞いについての Logic においては、 user の入力に対して、正しく描画を更新したり、イベントを発生させたりすることを確認する。
簡単な component のテストであれば、 Vue の Vitest というライブラリが利用できる。
Vitest で対応できないような複雑なコンポーネントのテストにおいては Cypress Component Testing が利用できる。ただしこれは擬似的なブラウザをテストランナーとして起動するものであり、実行は比較的遅くなるので注意。
まあ総じて、とりあえず Vue が提供してくれてるやつ使っとけばいいかなという感じ。
End-to-end
擬似的にブラウザを立ち上げ、アプリケーションにリクエストを投げて、レスポンスを検証するテスト。
アプリケーション側はデータベースを立ち上げる必要が発生するなど、テストの実行に様々なオーバヘッドが発生することが多い。 Unit テストや Component テストに比べると時間がかかり、リソースも消費する。
ただし、E2E テストは大事なものであり、またこれをサポートする様々なライブラリも出てきているので適宜利用すると良いとのこと。
でも、今のところ E2E テストはまだいいかなと思ったので流し見。もしまた使うことがあれば、まず Cypress から試してみる。
