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 3ではじめるテスト導入戦略と初手
Search
hacomono Inc.
PRO
November 22, 2024
0
59
Nuxt 3ではじめるテスト導入戦略と初手
hacomono Inc.
PRO
November 22, 2024
Tweet
Share
More Decks by hacomono Inc.
See All by hacomono Inc.
IoTの沈黙をどう検知する?Web系エンジニアが挑んだ苦難と改善記録
hacomono
PRO
0
36
AWS Step Functionsで実現するジョブ基盤 -プロダクトチームを支える基盤づくり-
hacomono
PRO
0
100
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
1
200
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
0
440
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
400
hacomonoの品質とQA[Findy Job LT]
hacomono
PRO
0
240
社運懸かった大型機能をゼロから作り直した話
hacomono
PRO
0
210
MagicPodでモバイルアプリの”自動テスト”を最速で立ち上げよう
hacomono
PRO
1
310
専任担当からチームに還してQA全員で取り組むテスト自動化
hacomono
PRO
0
340
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
522
40k
Faster Mobile Websites
deanohume
306
31k
Making Projects Easy
brettharned
116
6.1k
4 Signs Your Business is Dying
shpigford
183
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Applications with DynamoDB
mza
94
6.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Designing Experiences People Love
moore
141
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Language of Interfaces
destraynor
157
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Transcript
Nuxt 3で始めるテスト導入戦略と初手 Vue Fes Japan 2023 スポンサーセッション 野崎 才門 1
野崎 才門 / Saimon Nozaki • 株式会社 hacomono プロダクト開発本部 POSグループ
• hacomonoは2社目 • 前職から一貫して金融・決済サービス の開発に関わっています 自己紹介 2
section 0 hacomonoについて 3
4
5
None
None
section 1 hacomonoが提供するPOSレジ 8
hacomonoが提供するPOSレジ 予約決済 商品購入 予約 売上確認 会員 サイト 管理者 サイト POS
レジ 9
レジ バーコード リーダー レシート プリンター キャッシュド ロワー 10
section 2 アプリケーション構成 11
アプリケーション構成 iOS フロントエンド バックエンド ユーザ 構成の詳しい説明は、弊社ブログに記載 Capacitorプラグインで実現する、 Nuxt 3のハードウェア連携 Nuxt
3 WebView 経由 12
アプリケーション構成 useMember - selectMember - unselectMember - current … SearchMember
Modal plan.vue 状態の操作だけでなく 純粋な関数も含む - useState<’member’> Components Composables Pages API Issue Tracker HardWares … 13
アプリケーション構成 14 composablesは ”知識” の単位で分割されている member license cart purchase goodsItem
componentsやpagesから 関数呼び出しを通じて オブジェクトを取得するだけ 15 アプリケーション構成
section 3 課題感とアクション 16
課題感とアクション • hacomonoと共用する会計金額の計算 • 売上のCRUD • 点検・精算など各種締め処理 … • 入力・確認モーダルの制御
• 条件に応じたコンポーネントの活性制御 • データのフェッチと変換 … 17 「テスト不足」フロントエンドとバックエンドで少し違う
課題感とアクション • hacomonoと共用する会計金額の計算 • 売上のCRUD • 点検・精算など各種締め処理 … • 入力・確認モーダルの制御
• 条件に応じたコンポーネントの活性制御 • データのフェッチと変換 … 「テスト不足」フロントエンドとバックエンドで少し違う パターンをできるだけ 網羅したい! テストがない!できない! 18
課題感とアクション composablesにユニットテストを書けるようにする • フロントエンドにも状態の操作や値のチェック、表示の制御に使うロジック など 「ドメイン知識」をcomposablesに寄せる アーキテクチャ • composablesにテストが書かれていることで主要な操作に対する リグレッションの保護をかけることができるようになるはず
19
section 4 composablesへの ユニットテストの導入 20
composablesへのユニットテストの導入 VitestでNuxt 3のなにがしかのモジュールをテストしたい 場合、Nuxtの提供するAuto-importsの仕組みを突破・回避する 必要がある 従前よりNuxtの環境でもcomposablesやserverにテストを書きたいNuxtユーザがいたらしい。 2023年10月時点でもOpenになっている。 21
composablesへのユニットテストの導入 @danielroe 氏によって開発されたnuxt-vitestがNuxt 3でも 3.6.2にて導入されたため、試すことに https://github.com/danielroe/nuxt-vitest 22
composablesへのユニットテストの導入 https://github.com/nuxt/nuxt/pull/21884 https://github.com/nuxt/nuxt/releases/tag/v3.6.2 弊社では、nuxt-vitestの検証時にNuxt 3のバージョンを3.6.2以 上にアップデートする対応も含めていた 23
登場するテストコードなどのサンプル一式 composablesへのユニットテストの導入 https://github.com/simonNozaki/nuxt-unit-testing 24
補足: Why Vitest? composablesへのユニットテストの導入 • Nuxt 3はViteでバンドルや dev server起動を行っている ため、Vitestを少ない設定で
導入できる。 • テストの実行や結果確認に 便利なvitest-uiを 簡単に入れられる 25
nuxt-vitestはパッケージの追加と簡単なconfigのみで導入可能 composablesへのユニットテストの導入 vitest.config.ts 26
composablesのテストを追加(一般的なVitestと同じ書き方) composablesへのユニットテストの導入 useMember.spec.ts 27 useMember.spec.ts useMember.ts
apiコールも registerEndpoint でモックできる composablesへのユニットテストの導入 28
composablesへのユニットテストの導入 とはいえ、少しだけトラブルも... • composablesの中で依存している、他のcomposablesをモックする際に mockImportがうまく動かないときがある 29
composablesへのユニットテストの導入 vitestの vi.mock を素で書いて回避! 30
composablesへのユニットテストの導入 とはいえ、少しだけトラブルも... • 2023年10月時点ではvitest 0.34.0 以上とは互換性がない ◦ vitest 0.33.xとの組み合わせ に固定する必要がある
31
section 5 テスト導入のその先 32
1. 修正に対する心理的な負担感が小さくなった テスト導入のその先 • CIでもデータパターンを確認でき、「なんとなく壊れてそうで不 安」の懸念がぐっと減った! 33
2. 「フロントエンドでもテストを書く」機運が高まった テスト導入のその先 • 全社的な文脈も相まって、新規実装でも「テストをかけるなら 書き足すべき」という機運が高まった! 34
3. テストピラミッドが構築できる テスト導入のその先 • 意図せずテストピラミッドを積み上げる初手になった! (ユニットテストは実行速度と決定性に優れ、特にコスパが高い) E2E インテグレーション ユニット composables
35
インタラクションテストの導入をやる!!! テスト導入のその先 • composablesに対するユニットテストは、ドメインの色をもったロジックに対 するテストがスコープ • あるアクションをした際の表示や表示の制御に対するテストは別の方法 (具体的にはStorybook)でアプローチ予定 36
37