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