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
2.9k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
March 06, 2024
Tweet
Share
More Decks by wattanx
See All by wattanx
Unlocking the potential of Nuxt Server Components
wattanx
2
350
Deep dive into Nuxt Server Components
wattanx
1
2.1k
Demystifying Nuxt Bridge
wattanx
3
5.4k
小さく進める Nuxt 3 移行
wattanx
0
1.8k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2k
Other Decks in Technology
See All in Technology
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
AIチャットボット開発への生成AI活用
ryomrt
0
170
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
290
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
580
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Optimizing for Happiness
mojombo
376
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Faster Mobile Websites
deanohume
305
30k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
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〜