テストゼロの個人開発プロジェクトにテストを導入した話

テストゼロの個人開発プロジェクトにテストを導入した話 ryounasso

テストコードが存在しなかった個人開発プロジェクト個人開発で Web アプリを作成利用者はほぼ自分のみ、致命的なバグがない限りは問題になりづらい → テストコードを書かずに開発を続けてきたしかし、時々予想していなかった部分で意図していない挙動をするケースがあった提供済みの機能が正しく機能していることを事前に確認できるようにしたい欲しいものを欲しいままに創っている個人開発
| Qiita https://qiita.com/ryounasso/items/0df8c1e42dde97a9dbf2

テストを書く障壁 - テストを書く習慣がなく、どのように書けばいいかわからない - テスト書く時間より、新機能の追加を...

テストを書く障壁 - テストを書く習慣がなく、どのように書けばいいかわからない → 後述の進め方でハードルを少し下げる - テスト書く時間より、新機能の追加を... → 冬休みの期間にチャレンジすることでカバー！

リリース済みの機能をリストアップまずリリース済みの機能をリストアップし、テスト対象を把握上記以外にもあり、思ったより対象機能があった

闇雲に書くのではなく、適切なテストを「範囲」と「目的」の組み合わせを理解して、適切なテストを書いていくことが重要だと学習 https://testingjavascript.com/ Unit Test モジュール単体が提供する機能に着目コーナーケースの検証に向いている Integration Test 複数モジュールが連動する機能に着目
複数のモジュールが適切に動作し、予期した機能を提供するか確認 End to End Test 外部ストレージや連携するサブシステムを含むテスト

闇雲に書くのではなく、適切なテストを機能テスト意図した通りに機能が使えるかテストするフロントエンドにおいてはインタラクションテストが主になる非機能テスト機能要件以外の要素に関するテストフロントエンドではアクセシビリティがよく例で挙がるビジュアルリグレッションテスト見た目のリグレッションが発生していないかを確認するテスト「範囲」と「目的」の組み合わせを理解して、適切なテストを書いていくことが重要だと学習

闇雲に書くのではなく、適切なテストを今回の動機 : 提供済みの機能が正しく機能していることを事前に確認できるようにしたい Integration テストを拡充し、機能テストを目的とする

一つの機能でカバーする範囲をまず広げる方針として、まず 1 つの機能のテストを充実させることに - 環境構築が終わる - テストの例を作ることができる - テストを書く際の観点のコツを掴むことができる
→ 結果、全体のテスト導入のスピードが上がるテストの障壁の 1 つ目を改善

Storybook を使用 Storybook とは UI コンポーネントを一覧表示したり、実際の見た目や動作のプレビューが可能また、テストツールとして使用も可能 Storybook を選んだ理由 -
実際の UI を確認しながらテストを実装できる - test-runner で CLI や CI でテストを実行することができる - VRT も実装することができる - アクセシビリティの確認も可能 (@storybook/addon-a11y)

Storybook を使用

test-runner とは Storybookの各ストーリーをテストケースに変換し、実行するためのツール test-runner を用いることで CLI や CI でテスト実行が可能に CI
で自動化 → 変更を加えた際に、Story が壊れていないか確認が可能に！

まとめテストゼロの個人開発プロジェクトにテストを導入した Storybook を活用することで、目的を達成することができた感じているメリット - 今後、テストコードを拡充するためのベースを作れた - リファクタリングが行いやすくなった

参考資料 - StorybookでMock Service Worker (MSW) を使えるようにする。 https://zenn.dev/rabbit/articles/dd9b04940b93fe - Run
against non-deployed Storybooks https://storybook.js.org/docs/writing-tests/test-runner#run-a gainst-non-deployed-storybooks - Interaction tests | Storybook https://storybook.js.org/docs/writing-tests/interaction-testing

テストゼロの個人開発プロジェクトにテストを導入した話

テストゼロの個人開発プロジェクトにテストを導入した話

ryounasso

More Decks by ryounasso

Other Decks in Programming

Featured

Transcript