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

by hacomono Inc.

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

section 0 hacomonoについて 3 

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

アプリケーション構成 14  composablesは ”知識” の単位で分割されている member license cart purchase goodsItem

Slide 15

Slide 15 text

componentsやpagesから関数呼び出しを通じてオブジェクトを取得するだけ 15  アプリケーション構成

Slide 16

Slide 16 text

section 3 課題感とアクション 16 

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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 

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

composablesのテストを追加（一般的なVitestと同じ書き方） composablesへのユニットテストの導入 useMember.spec.ts 27  useMember.spec.ts useMember.ts

Slide 28

Slide 28 text

apiコールも registerEndpoint でモックできる composablesへのユニットテストの導入 28 

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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