Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

wattanx
March 06, 2024

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

wattanx

March 06, 2024
Tweet

More Decks by wattanx

Other Decks in Technology

Transcript

  1. 目次 2 自己紹介 はじめに Nuxt Test Utils を使った Unit Test

    Nuxt Test Utils を使った E2E Test まとめ 01 02 03 04 05
  2. はじめに(@nuxt/test-utils とは) • plugins で inject された モジュール ◦ Nuxt

    アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる
  3. はじめに(@nuxt/test-utils とは) • plugins で inject された モジュール ◦ Nuxt

    アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる @nuxt/test-utils で 全て解決します
  4. はじめに(@nuxt/test-utils とは) • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API

    Request を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている
  5. @nuxt/test-utils を使った Unit Test • Nuxt Runtime 環境を必要とするコードを Unit Test

    する ための環境を提供している • 現在は Vitest のみサポートしている。 Unit Test
  6. @nuxt/test-utils を使った Unit Test • .nuxt. をつける。(my-file.nuxt.test.ts, my-file.nuxt.spec.ts) • または

    `@vitest-environment nuxt` を テストファイルに書くことで Nuxt Runtime 環境でテストが実行さ れる
  7. @nuxt/test-utils を使った Unit Test Nuxt Runtime 環境でテストができるので • plugins や

    middleware, modules が実行された環境でテストが実行 できる。 • Auto Import も 設定不要で動作する。
  8. @nuxt/test-utils を使った Unit Test • Nuxt の Auto Import している関数をモックすることがで

    きる。 ◦ Auto Import を使っていなくても利用可能 mockNuxtImport
  9. @nuxt/test-utils を使った Unit Test mockNuxtImport の 例 Auto Import or

    明示的に import した navigateTo navigateTo を mock してる
  10. @nuxt/test-utils を使った Unit Test registerEndpoint の 例 API Request を

    mockしてる (nitro endpoint が作成されている) API Request
  11. @nuxt/test-utils を使った E2E Test 使い分け(個人的な考え) • Unit Test ◦ Nuxt

    に依存した機能を利用している かつ クライアントサイドのテストしたい場合。 • E2E (without browser) ◦ サーバーサイドのテストがしたい場合 ▪ server plugins や server middleware 含めて • E2E(with browser) ◦ サーバー・クライアントサイド通してテストしたい場合。
  12. まとめ • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API Request

    を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている