$30 off During Our Annual Pro Sale. View Details »

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

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

話者の所属する hacomono はここ数年でぐっとお客様も増え、それに比例して品質に対する期待値も高まっています。 一方で、製品にはテスト基盤が薄く、リグレッションやリファクタリングできないといった課題が強く意識されるようになりました。 本セッションでは、テスト導入に向けた戦略やそのために行ってきた準備と、その結果をお話できればと思います。

株式会社 hacomono プロダクト開発本部 POS グループ
野崎 才門

hacomono Inc.

October 31, 2023
Tweet

More Decks by hacomono Inc.

Other Decks in Technology

Transcript

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


    View Slide

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


    View Slide

  3. section
    0 hacomonoについて
    3


    View Slide

  4. 4


    View Slide

  5. 5


    View Slide

  6. View Slide

  7. View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

  13. アプリケーション構成
    useMember
    - selectMember
    - unselectMember
    - current

    SearchMember
    Modal
    plan.vue
    状態の操作だけでなく
    純粋な関数も含む
    - useState<’member’>
    Components Composables
    Pages
    API
    Issue Tracker
    HardWares

    13


    View Slide

  14. アプリケーション構成
    14

    composablesは ”知識” の単位で分割されている
    member
    license
    cart
    purchase
    goodsItem

    View Slide

  15. componentsやpagesから
    関数呼び出しを通じて
    オブジェクトを取得するだけ
    15

    アプリケーション構成

    View Slide

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


    View Slide

  17. 課題感とアクション
    ● hacomonoと共用する会計金額の計算
    ● 売上のCRUD
    ● 点検・精算など各種締め処理

    ● 入力・確認モーダルの制御
    ● 条件に応じたコンポーネントの活性制御
    ● データのフェッチと変換

    17

    「テスト不足」フロントエンドとバックエンドで少し違う

    View Slide

  18. 課題感とアクション
    ● hacomonoと共用する会計金額の計算
    ● 売上のCRUD
    ● 点検・精算など各種締め処理

    ● 入力・確認モーダルの制御
    ● 条件に応じたコンポーネントの活性制御
    ● データのフェッチと変換

    「テスト不足」フロントエンドとバックエンドで少し違う
    パターンをできるだけ
    網羅したい!
    テストがない!できない!
    18


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

  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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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

    useMember.spec.ts
    useMember.ts

    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

  37. 37


    View Slide