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
380
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
January 11, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
2.3k
Clean Architecture by TypeScript & NestJS
ryounasso
0
690
Fast API を用いた Web API の開発
ryounasso
0
480
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
710
kintone新機能開発のお仕事
ryounasso
2
110
Other Decks in Programming
See All in Programming
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
Going Structural with Named Tuples
bishabosha
0
170
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
980
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
310
プログラミング教育のコスパの話
superkinoko
0
120
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3k
List とは何か? / PHPerKaigi 2025
meihei3
0
550
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
230
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
GraphQLとの向き合い方2022年版
quramy
45
14k
Building Your Own Lightsaber
phodgson
104
6.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Git: the NoSQL Database
bkeepers
PRO
429
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
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