Nuxt 3ではじめるテスト導入戦略と初手

Transcript

1. Nuxt 3で始めるテスト導入戦略と初手 Vue Fes Japan 2023 スポンサーセッション 野崎 才門 1

2. 野崎 才門 / Saimon Nozaki • 株式会社 hacomono プロダクト開発本部 POSグループ • hacomonoは2社目 • 前職から一貫して金融・決済サービス の開発に関わっています 自己紹介 2

3. section 0 hacomonoについて 3

8. section 1 hacomonoが提供するPOSレジ 8

9. hacomonoが提供するPOSレジ 予約決済 商品購入 予約 売上確認 会員 サイト 管理者 サイト POS レジ 9

10. レジ バーコード リーダー レシート プリンター キャッシュド ロワー 10

11. section 2 アプリケーション構成 11

12. アプリケーション構成 iOS フロントエンド バックエンド ユーザ 構成の詳しい説明は、弊社ブログに記載 Capacitorプラグインで実現する、 Nuxt 3のハードウェア連携 Nuxt 3 WebView 経由 12

13. アプリケーション構成 useMember - selectMember - unselectMember - current … SearchMember Modal plan.vue 状態の操作だけでなく 純粋な関数も含む - useState<’member’> Components Composables Pages API Issue Tracker HardWares … 13

14. アプリケーション構成 14
 composablesは ”知識” の単位で分割されている member license cart purchase goodsItem
15. componentsやpagesから 関数呼び出しを通じて オブジェクトを取得するだけ 15
 アプリケーション構成
16. section 3 課題感とアクション 16

17. 課題感とアクション • hacomonoと共用する会計金額の計算 • 売上のCRUD • 点検・精算など各種締め処理 … • 入力・確認モーダルの制御 • 条件に応じたコンポーネントの活性制御 • データのフェッチと変換 … 17
 「テスト不足」フロントエンドとバックエンドで少し違う
18. 課題感とアクション • hacomonoと共用する会計金額の計算 • 売上のCRUD • 点検・精算など各種締め処理 … • 入力・確認モーダルの制御 • 条件に応じたコンポーネントの活性制御 • データのフェッチと変換 … 「テスト不足」フロントエンドとバックエンドで少し違う パターンをできるだけ 網羅したい！ テストがない！できない！ 18

19. 課題感とアクション composablesにユニットテストを書けるようにする • フロントエンドにも状態の操作や値のチェック、表示の制御に使うロジック など 「ドメイン知識」をcomposablesに寄せる アーキテクチャ • composablesにテストが書かれていることで主要な操作に対する リグレッションの保護をかけることができるようになるはず 19

20. section 4 composablesへの ユニットテストの導入 20

21. composablesへのユニットテストの導入 VitestでNuxt 3のなにがしかのモジュールをテストしたい 場合、Nuxtの提供するAuto-importsの仕組みを突破・回避する 必要がある 従前よりNuxtの環境でもcomposablesやserverにテストを書きたいNuxtユーザがいたらしい。 2023年10月時点でもOpenになっている。 21

22. composablesへのユニットテストの導入 @danielroe 氏によって開発されたnuxt-vitestがNuxt 3でも 3.6.2にて導入されたため、試すことに https://github.com/danielroe/nuxt-vitest 22

23. 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

24. 登場するテストコードなどのサンプル一式 composablesへのユニットテストの導入 https://github.com/simonNozaki/nuxt-unit-testing 24

25. 補足: Why Vitest? composablesへのユニットテストの導入 • Nuxt 3はViteでバンドルや dev server起動を行っている ため、Vitestを少ない設定で 導入できる。 • テストの実行や結果確認に 便利なvitest-uiを 簡単に入れられる 25

26. nuxt-vitestはパッケージの追加と簡単なconfigのみで導入可能 composablesへのユニットテストの導入 vitest.config.ts 26

27. composablesのテストを追加（一般的なVitestと同じ書き方） composablesへのユニットテストの導入 useMember.spec.ts 27
 useMember.spec.ts useMember.ts
28. apiコールも registerEndpoint でモックできる composablesへのユニットテストの導入 28

29. composablesへのユニットテストの導入 とはいえ、少しだけトラブルも... • composablesの中で依存している、他のcomposablesをモックする際に mockImportがうまく動かないときがある 29

30. composablesへのユニットテストの導入 vitestの vi.mock を素で書いて回避！ 30

31. composablesへのユニットテストの導入 とはいえ、少しだけトラブルも... • 2023年10月時点ではvitest 0.34.0 以上とは互換性がない ◦ vitest 0.33.xとの組み合わせ に固定する必要がある 31

32. section 5 テスト導入のその先 32

33. 1. 修正に対する心理的な負担感が小さくなった テスト導入のその先 • CIでもデータパターンを確認でき、「なんとなく壊れてそうで不 安」の懸念がぐっと減った！ 33

34. 2. 「フロントエンドでもテストを書く」機運が高まった テスト導入のその先 • 全社的な文脈も相まって、新規実装でも「テストをかけるなら 書き足すべき」という機運が高まった！ 34

35. 3. テストピラミッドが構築できる テスト導入のその先 • 意図せずテストピラミッドを積み上げる初手になった！ (ユニットテストは実行速度と決定性に優れ、特にコスパが高い) E2E インテグレーション ユニット composables 35

36. インタラクションテストの導入をやる！！！ テスト導入のその先 • composablesに対するユニットテストは、ドメインの色をもったロジックに対 するテストがスコープ • あるアクションをした際の表示や表示の制御に対するテストは別の方法 （具体的にはStorybook）でアプローチ予定 36