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.8k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
March 06, 2024
Tweet
Share
More Decks by wattanx
See All by wattanx
フロントエンド技術選定の裏側
wattanx
0
62
Unlocking the potential of Nuxt Server Components
wattanx
2
570
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
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
660
Webアクセシビリティ入門
recruitengineers
PRO
1
260
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
0
190
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
モバイルアプリ研修
recruitengineers
PRO
2
260
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
360
ECS モニタリング手法大整理
yendoooo
1
120
帳票Vibe Coding
terurou
0
140
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Thoughts on Productivity
jonyablonski
69
4.8k
GitHub's CSS Performance
jonrohan
1031
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Bash Introduction
62gerente
614
210k
Site-Speed That Sticks
csswizardry
10
790
Fireside Chat
paigeccino
39
3.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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〜