Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト

1. STORES 株式会社 Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
2. 目次 2 自己紹介 はじめに Nuxt Test Utils を使った Unit Test Nuxt Test Utils を使った E2E Test まとめ 01 02 03 04 05
3. 自己紹介
4. 渡邊 涼太（wattanx） ・STORES 株式会社 ソフトウェアエンジニア。 ・STORES ネットショップの開発に関わっている。 ・猫が好き。大阪在住。 ・Nuxt Bridge のコアコントリビュータ。 ・https://twitter.com/pontaxx 自己紹介
5. STORES について
6. STORES の事業 お店のデジタルを まるっとサポート。 個人や中小事業の方々に向けて、 お店のデジタル化をまるっと 実現できる価値を提供しています。
7. はじめに
8. はじめに（今日話すこと） @nuxt/test-utils を用いた Nuxt 3 アプリケーションの Unit Test, E2E Test について話します。
9. はじめに（今日話さないこと） Nuxt 2 のテストや テスティングフレームワーク自体には あまり触れません
10. はじめに @nuxt/test-utils を知っていますか？
11. はじめに（@nuxt/test-utils とは） • https://github.com/nuxt/test-utils • Nuxt 3 アプリケーションの Unit Test, E2E Test を書きやすくするライブラリ @nuxt/test-utils とは
12. はじめに（@nuxt/test-utils とは） plugins で inject された モジュール API Request Auto Import Nuxt 3 アプリケーションのよくあるコード
13. はじめに（@nuxt/test-utils とは） • plugins で inject された モジュール ◦ Nuxt アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる
14. はじめに（@nuxt/test-utils とは） • plugins で inject された モジュール ◦ Nuxt アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる @nuxt/test-utils で 全て解決します
15. はじめに（@nuxt/test-utils とは） • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API Request を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている
16. @nuxt/test-utils を使った Unit Test
17. @nuxt/test-utils を使った Unit Test • Nuxt Runtime 環境を必要とするコードを Unit Test する ための環境を提供している • 現在は Vitest のみサポートしている。 Unit Test
18. @nuxt/test-utils を使った Unit Test セットアップ vitest.config.ts を作成し、以下のような設定を書きます。
19. @nuxt/test-utils を使った Unit Test • .nuxt. をつける。(my-file.nuxt.test.ts, my-file.nuxt.spec.ts) • または `@vitest-environment nuxt` を テストファイルに書くことで Nuxt Runtime 環境でテストが実行さ れる
20. @nuxt/test-utils を使った Unit Test Nuxt Runtime 環境でテストができるので • plugins や middleware, modules が実行された環境でテストが実行 できる。 • Auto Import も 設定不要で動作する。
21. @nuxt/test-utils を使った Unit Test なんと便利なモックや Helpers も用意されている
22. @nuxt/test-utils を使った Unit Test • IntersectionObserver API • IndexedDB API Built in Mocks
23. @nuxt/test-utils を使った Unit Test config に設定するだけで利用可能
24. @nuxt/test-utils を使った Unit Test Helpers
25. @nuxt/test-utils を使った Unit Test • Nuxt アプリケーション内で任意のコンポーネントをマウ ントし、async setup を使用可能にする。 mountSuspended
26. @nuxt/test-utils を使った Unit Test Vue Test Utils の Docs によると Suspense で囲ったりする必要がある
27. @nuxt/test-utils を使った Unit Test mountSuspended の 例 top level await なので async setup
28. @nuxt/test-utils を使った Unit Test • mountSuspended の @testing-library/vue 版 renderSuspended
29. @nuxt/test-utils を使った Unit Test • Nuxt の Auto Import している関数をモックすることがで きる。 ◦ Auto Import を使っていなくても利用可能 mockNuxtImport
30. @nuxt/test-utils を使った Unit Test 明示的にimportしている場合のモック（mockNuxtImport を使わない） 明示的にimportする場合は #imports でimportできる mockNuxtImport がない場合は こんなに書く必要がある
31. @nuxt/test-utils を使った Unit Test mockNuxtImport の 例 Auto Import or 明示的に import した navigateTo navigateTo を mock してる
32. @nuxt/test-utils を使った Unit Test • Component をモックできる mockComponent
33. @nuxt/test-utils を使った Unit Test mockComponent の 例 Component名でモックできる 相対パスまたはエイリアスでもいい
34. @nuxt/test-utils を使った Unit Test mockNuxtImport や mockComponent は macro テストを見ると どう変換されるかわかりやすい
35. @nuxt/test-utils を使った Unit Test • モックデータを返す Nitro エンドポイントを作成できる。 API にリクエストしてデータを表示するコンポーネントを テストしたい場合に便利。 ◦ 外部の API もモック可能。 registerEndpoint
36. @nuxt/test-utils を使った Unit Test registerEndpoint の 例 API Request を mockしてる (nitro endpoint が作成されている) API Request
37. @nuxt/test-utils を使った E2E Test
38. @nuxt/test-utils を使った E2E Test • Jest と Vitest をテストランナーとした E2E Test を サ ポートしている E2E Test
39. @nuxt/test-utils を使った E2E Test テストの設定を書く server でレンダリングされた ページを返す
40. @nuxt/test-utils を使った E2E Test @nuxt/test-utils が提供する fetch(url) を使うと、body や headers の検証もできる
41. @nuxt/test-utils を使った E2E Test browser を使ったテストもできる（Playwright を使用） full URLを返すヘルパー （テストで動いているサーバーのportも含む）
42. @nuxt/test-utils を使った E2E Test @nuxt/test-utils/runtime と @nuxt/test-utils/e2e は 同一ファイルに書くことができない その場合はファイルを分けることで解決できる （例） • Unit Test: my-file.nuxt.spec.ts • E2E Test: my-file.e2e.spec.ts 注意点
43. @nuxt/test-utils を使った E2E Test 使い分け（個人的な考え） • Unit Test ◦ Nuxt に依存した機能を利用している かつ クライアントサイドのテストしたい場合。 • E2E (without browser) ◦ サーバーサイドのテストがしたい場合 ▪ server plugins や server middleware 含めて • E2E（with browser） ◦ サーバー・クライアントサイド通してテストしたい場合。
44. まとめ
45. まとめ • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API Request を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている
46. まとめ STORES のオフィスでわいわい🍻🍣しませんか！ 3月28日（木）19:00〜
47. まとめ STORES のオフィスでわいわい🍻🍣しませんか！ 3月28日（木）19:00〜