Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テストゼロの個人開発プロジェクトにテストを導入した話
Search
ryounasso
January 11, 2024
Programming
0
390
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
January 11, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
抽象データ型について学んだ
ryounasso
0
110
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
2.6k
Clean Architecture by TypeScript & NestJS
ryounasso
0
770
Fast API を用いた Web API の開発
ryounasso
0
500
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.2k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
740
kintone新機能開発のお仕事
ryounasso
2
110
Other Decks in Programming
See All in Programming
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
190
生成AI時代のフルスタック開発
kenn
8
1k
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
120
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
260
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
Serving TUIs over SSH with Go
caarlos0
0
800
파급효과: From AI to Android Development
l2hyunwoo
0
170
Embracing Ruby magic
vinistock
2
300
ComposeでのPicture in Picture
takathemax
0
150
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
160
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
150
はじめてのPDFKit.pdf
shomakato
0
110
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Typedesign – Prime Four
hannesfritz
41
2.6k
Documentation Writing (for coders)
carmenintech
71
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Bash Introduction
62gerente
613
210k
How to train your dragon (web standard)
notwaldorf
91
6k
Rails Girls Zürich Keynote
gr2m
94
13k
How to Ace a Technical Interview
jacobian
276
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Transcript
テストゼロの 個人開発プロジェクトに テストを導入した話 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
None