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.8k
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
250
Deep dive into Nuxt Server Components
wattanx
1
1.9k
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
GraphRAGを用いたLLMによるパーソナライズド推薦の生成
naveed92
0
190
Spring Frameworkの新標準!? ~ RestClientとHTTPインターフェース入門 ~
ogiwarat
2
240
組み込みLinuxの時系列
puhitaku
3
960
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
850
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
130
Autify Company Deck
autifyhq
1
39k
Fargateを使った研修の話
takesection
0
160
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
170
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.6k
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
1
190
What to do after `laravel new`
mattstauffer
0
130
Observability を実現するためにアセットを活用しよう(AWS 秋の Observability 祭り ~明日使えるアセット祭り~ )
tsujiba
0
140
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.5k
Rails Girls Zürich Keynote
gr2m
93
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Practical Orchestrator
shlominoach
186
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Facilitating Awesome Meetings
lara
49
6.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
A Philosophy of Restraint
colly
203
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Side Projects
sachag
452
42k
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〜