話者の所属する hacomono はここ数年でぐっとお客様も増え、それに比例して品質に対する期待値も高まっています。 一方で、製品にはテスト基盤が薄く、リグレッションやリファクタリングできないといった課題が強く意識されるようになりました。 本セッションでは、テスト導入に向けた戦略やそのために行ってきた準備と、その結果をお話できればと思います。
株式会社 hacomono プロダクト開発本部 POS グループ 野崎 才門
Nuxt 3で始めるテスト導入戦略と初手Vue Fes Japan 2023 スポンサーセッション野崎 才門1
View Slide
野崎 才門 / Saimon Nozaki● 株式会社 hacomonoプロダクト開発本部 POSグループ● hacomonoは2社目● 前職から一貫して金融・決済サービスの開発に関わっています自己紹介2
section0 hacomonoについて3
4
5
section1 hacomonoが提供するPOSレジ8
hacomonoが提供するPOSレジ予約決済商品購入予約売上確認会員サイト管理者サイトPOSレジ9
レジバーコードリーダーレシートプリンターキャッシュドロワー10
section2 アプリケーション構成11
アプリケーション構成iOS フロントエンド バックエンドユーザ構成の詳しい説明は、弊社ブログに記載Capacitorプラグインで実現する、 Nuxt 3のハードウェア連携Nuxt 3WebView 経由12
アプリケーション構成useMember- selectMember- unselectMember- current…SearchMemberModalplan.vue状態の操作だけでなく純粋な関数も含む- useState<’member’>Components ComposablesPagesAPIIssue TrackerHardWares…13
アプリケーション構成14 composablesは ”知識” の単位で分割されているmemberlicensecartpurchasegoodsItem
componentsやpagesから関数呼び出しを通じてオブジェクトを取得するだけ15 アプリケーション構成
section3 課題感とアクション16
課題感とアクション● hacomonoと共用する会計金額の計算● 売上のCRUD● 点検・精算など各種締め処理…● 入力・確認モーダルの制御● 条件に応じたコンポーネントの活性制御● データのフェッチと変換…17 「テスト不足」フロントエンドとバックエンドで少し違う
課題感とアクション● hacomonoと共用する会計金額の計算● 売上のCRUD● 点検・精算など各種締め処理…● 入力・確認モーダルの制御● 条件に応じたコンポーネントの活性制御● データのフェッチと変換…「テスト不足」フロントエンドとバックエンドで少し違うパターンをできるだけ網羅したい！テストがない！できない！18
課題感とアクションcomposablesにユニットテストを書けるようにする● フロントエンドにも状態の操作や値のチェック、表示の制御に使うロジックなど 「ドメイン知識」をcomposablesに寄せる アーキテクチャ● composablesにテストが書かれていることで主要な操作に対するリグレッションの保護をかけることができるようになるはず19
section4 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-vitest22
composablesへのユニットテストの導入https://github.com/nuxt/nuxt/pull/21884https://github.com/nuxt/nuxt/releases/tag/v3.6.2弊社では、nuxt-vitestの検証時にNuxt 3のバージョンを3.6.2以上にアップデートする対応も含めていた23
登場するテストコードなどのサンプル一式composablesへのユニットテストの導入https://github.com/simonNozaki/nuxt-unit-testing24
補足: Why Vitest?composablesへのユニットテストの導入● Nuxt 3はViteでバンドルやdev server起動を行っているため、Vitestを少ない設定で導入できる。● テストの実行や結果確認に便利なvitest-uiを簡単に入れられる25
nuxt-vitestはパッケージの追加と簡単なconfigのみで導入可能composablesへのユニットテストの導入vitest.config.ts26
composablesのテストを追加（一般的なVitestと同じ書き方）composablesへのユニットテストの導入useMember.spec.ts27 useMember.spec.tsuseMember.ts
apiコールも registerEndpoint でモックできるcomposablesへのユニットテストの導入28
composablesへのユニットテストの導入とはいえ、少しだけトラブルも...● composablesの中で依存している、他のcomposablesをモックする際にmockImportがうまく動かないときがある29
composablesへのユニットテストの導入vitestの vi.mock を素で書いて回避！30
composablesへのユニットテストの導入とはいえ、少しだけトラブルも...● 2023年10月時点ではvitest0.34.0 以上とは互換性がない○ vitest 0.33.xとの組み合わせに固定する必要がある31
section5 テスト導入のその先32
1. 修正に対する心理的な負担感が小さくなったテスト導入のその先● CIでもデータパターンを確認でき、「なんとなく壊れてそうで不安」の懸念がぐっと減った！33
2. 「フロントエンドでもテストを書く」機運が高まったテスト導入のその先● 全社的な文脈も相まって、新規実装でも「テストをかけるなら書き足すべき」という機運が高まった！34
3. テストピラミッドが構築できるテスト導入のその先● 意図せずテストピラミッドを積み上げる初手になった！(ユニットテストは実行速度と決定性に優れ、特にコスパが高い)E2Eインテグレーションユニット composables35
インタラクションテストの導入をやる！！！テスト導入のその先● composablesに対するユニットテストは、ドメインの色をもったロジックに対するテストがスコープ● あるアクションをした際の表示や表示の制御に対するテストは別の方法（具体的にはStorybook）でアプローチ予定36
37
hacomono
minorun365
track3jyo
biwashi
yamamuteki
iamshunta
sat
sorami
dskst
yukimatsuyoshi
hanayo04
nishiuma
kazamori
chrislema
productmarketing
addyosmani
yeseniaperezcruz
philhawksworth
iamctodd
holman
tanoku
mojombo
kevinliebholz
shpigford
mongodb