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.9k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
March 06, 2024
Tweet
Share
More Decks by wattanx
See All by wattanx
フロントエンド技術選定の裏側
wattanx
0
80
Unlocking the potential of Nuxt Server Components
wattanx
2
580
Deep dive into Nuxt Server Components
wattanx
1
3.3k
Demystifying Nuxt Bridge
wattanx
3
6.7k
小さく進める Nuxt 3 移行
wattanx
0
2k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2.1k
Other Decks in Technology
See All in Technology
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
210
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
560
slog.Handlerのよくある実装ミス
sakiengineer
4
410
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
860
テストを軸にした生き残り術
kworkdev
PRO
0
210
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
440
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
450
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Optimizing for Happiness
mojombo
379
70k
Visualization
eitanlees
148
16k
Code Reviewing Like a Champion
maltzj
525
40k
Fireside Chat
paigeccino
39
3.6k
Site-Speed That Sticks
csswizardry
10
820
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Unsuck your backbone
ammeep
671
58k
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〜