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
23
Nuxt 3ではじめるテスト導入戦略と初手
hacomono Inc.
PRO
November 22, 2024
Tweet
Share
More Decks by hacomono Inc.
See All by hacomono Inc.
MagicPodでモバイルアプリの”自動テスト”を最速で立ち上げよう
hacomono
PRO
1
69
専任担当からチームに還してQA全員で取り組むテスト自動化
hacomono
PRO
0
55
Waroomとインシデントと私
hacomono
PRO
0
110
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
610
初めてアジャイルテストに挑戦してみたら、スクラムチームが良いサイクルを回し始めた話
hacomono
PRO
1
250
スクラムチームの品質戦略 1年の歩み
hacomono
PRO
1
400
スクラムエッセンス導入3ヶ月のチームに起きた変化
hacomono
PRO
1
380
アジャイルの灯火を絶やさない! 社内アジャイルコミュニティ運営
hacomono
PRO
1
340
hacomonoにおけるプロダクトエンジニアの役割と生態
hacomono
PRO
5
840
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Docker and Python
trallard
42
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
YesSQL, Process and Tooling at Scale
rocio
169
14k
A Tale of Four Properties
chriscoyier
157
23k
Faster Mobile Websites
deanohume
305
30k
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