Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
Search
wattanx
March 06, 2024
Technology
4
3.7k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
March 06, 2024
Tweet
Share
More Decks by wattanx
See All by wattanx
フロントエンド技術選定の裏側
wattanx
0
45
Unlocking the potential of Nuxt Server Components
wattanx
2
540
Deep dive into Nuxt Server Components
wattanx
1
3.1k
Demystifying Nuxt Bridge
wattanx
3
6.5k
小さく進める Nuxt 3 移行
wattanx
0
2k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2.1k
Other Decks in Technology
See All in Technology
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
430
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
5k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
Model Mondays S2E02: Model Context Protocol
nitya
0
220
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Rails Girls Zürich Keynote
gr2m
94
14k
The Invisible Side of Design
smashingmag
299
51k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
STORES 株式会社 Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
目次 2 自己紹介 はじめに Nuxt Test Utils を使った Unit Test
Nuxt Test Utils を使った E2E Test まとめ 01 02 03 04 05
自己紹介
渡邊 涼太(wattanx) ・STORES 株式会社 ソフトウェアエンジニア。 ・STORES ネットショップの開発に関わっている。 ・猫が好き。大阪在住。 ・Nuxt Bridge
のコアコントリビュータ。 ・https://twitter.com/pontaxx 自己紹介
STORES について
STORES の事業 お店のデジタルを まるっとサポート。 個人や中小事業の方々に向けて、 お店のデジタル化をまるっと 実現できる価値を提供しています。
はじめに
はじめに(今日話すこと) @nuxt/test-utils を用いた Nuxt 3 アプリケーションの Unit Test, E2E Test
について話します。
はじめに(今日話さないこと) Nuxt 2 のテストや テスティングフレームワーク自体には あまり触れません
はじめに @nuxt/test-utils を知っていますか?
はじめに(@nuxt/test-utils とは) • https://github.com/nuxt/test-utils • Nuxt 3 アプリケーションの Unit Test,
E2E Test を書きやすくするライブラリ @nuxt/test-utils とは
はじめに(@nuxt/test-utils とは) plugins で inject された モジュール API Request Auto
Import Nuxt 3 アプリケーションのよくあるコード
はじめに(@nuxt/test-utils とは) • plugins で inject された モジュール ◦ Nuxt
アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる
はじめに(@nuxt/test-utils とは) • plugins で inject された モジュール ◦ Nuxt
アプリケーションを立ち上げなければ動かない ▪ なのでモックする必要がある • API Request ◦ モックする必要がある • Auto Import ◦ unimport を使って、vitest.config を設定したりすればなんとか なる @nuxt/test-utils で 全て解決します
はじめに(@nuxt/test-utils とは) • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API
Request を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている
@nuxt/test-utils を使った Unit Test
@nuxt/test-utils を使った Unit Test • Nuxt Runtime 環境を必要とするコードを Unit Test
する ための環境を提供している • 現在は Vitest のみサポートしている。 Unit Test
@nuxt/test-utils を使った Unit Test セットアップ vitest.config.ts を作成し、以下のような設定を書きます。
@nuxt/test-utils を使った Unit Test • .nuxt. をつける。(my-file.nuxt.test.ts, my-file.nuxt.spec.ts) • または
`@vitest-environment nuxt` を テストファイルに書くことで Nuxt Runtime 環境でテストが実行さ れる
@nuxt/test-utils を使った Unit Test Nuxt Runtime 環境でテストができるので • plugins や
middleware, modules が実行された環境でテストが実行 できる。 • Auto Import も 設定不要で動作する。
@nuxt/test-utils を使った Unit Test なんと便利なモックや Helpers も用意されている
@nuxt/test-utils を使った Unit Test • IntersectionObserver API • IndexedDB API
Built in Mocks
@nuxt/test-utils を使った Unit Test config に設定するだけで利用可能
@nuxt/test-utils を使った Unit Test Helpers
@nuxt/test-utils を使った Unit Test • Nuxt アプリケーション内で任意のコンポーネントをマウ ントし、async setup を使用可能にする。
mountSuspended
@nuxt/test-utils を使った Unit Test Vue Test Utils の Docs によると
Suspense で囲ったりする必要がある
@nuxt/test-utils を使った Unit Test mountSuspended の 例 top level await
なので async setup
@nuxt/test-utils を使った Unit Test • mountSuspended の @testing-library/vue 版 renderSuspended
@nuxt/test-utils を使った Unit Test • Nuxt の Auto Import している関数をモックすることがで
きる。 ◦ Auto Import を使っていなくても利用可能 mockNuxtImport
@nuxt/test-utils を使った Unit Test 明示的にimportしている場合のモック(mockNuxtImport を使わない) 明示的にimportする場合は #imports でimportできる mockNuxtImport
がない場合は こんなに書く必要がある
@nuxt/test-utils を使った Unit Test mockNuxtImport の 例 Auto Import or
明示的に import した navigateTo navigateTo を mock してる
@nuxt/test-utils を使った Unit Test • Component をモックできる mockComponent
@nuxt/test-utils を使った Unit Test mockComponent の 例 Component名でモックできる 相対パスまたはエイリアスでもいい
@nuxt/test-utils を使った Unit Test mockNuxtImport や mockComponent は macro テストを見ると
どう変換されるかわかりやすい
@nuxt/test-utils を使った Unit Test • モックデータを返す Nitro エンドポイントを作成できる。 API にリクエストしてデータを表示するコンポーネントを
テストしたい場合に便利。 ◦ 外部の API もモック可能。 registerEndpoint
@nuxt/test-utils を使った Unit Test registerEndpoint の 例 API Request を
mockしてる (nitro endpoint が作成されている) API Request
@nuxt/test-utils を使った E2E Test
@nuxt/test-utils を使った E2E Test • Jest と Vitest をテストランナーとした E2E
Test を サ ポートしている E2E Test
@nuxt/test-utils を使った E2E Test テストの設定を書く server でレンダリングされた ページを返す
@nuxt/test-utils を使った E2E Test @nuxt/test-utils が提供する fetch(url) を使うと、body や headers
の検証もできる
@nuxt/test-utils を使った E2E Test browser を使ったテストもできる(Playwright を使用) full URLを返すヘルパー (テストで動いているサーバーのportも含む)
@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 注意点
@nuxt/test-utils を使った E2E Test 使い分け(個人的な考え) • Unit Test ◦ Nuxt
に依存した機能を利用している かつ クライアントサイドのテストしたい場合。 • E2E (without browser) ◦ サーバーサイドのテストがしたい場合 ▪ server plugins や server middleware 含めて • E2E(with browser) ◦ サーバー・クライアントサイド通してテストしたい場合。
まとめ
まとめ • @nuxt/test-utils は Nuxt Runtime 環境でテストを実行できる • API Request
を nitro エンドポイントを作成してモックできる。 • 設定不要で Auto Import が動作する。 • 便利な Helpers がある。 • E2E Test もサポートしている
まとめ STORES のオフィスでわいわい🍻🍣しませんか! 3月28日(木)19:00〜
まとめ STORES のオフィスでわいわい🍻🍣しませんか! 3月28日(木)19:00〜