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
420
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
January 11, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
明日から始めるリファクタリング
ryounasso
0
140
駆け足で Google から学ぶテスト設計の指針
ryounasso
0
120
React inside basics: learn from “build own react"
ryounasso
0
140
抽象データ型について学んだ
ryounasso
0
280
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
3.2k
Clean Architecture by TypeScript & NestJS
ryounasso
0
980
Fast API を用いた Web API の開発
ryounasso
0
540
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.3k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
800
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
740
モテるデスク環境
mozumasu
3
1.3k
What's new in Spring Modulith?
olivergierke
1
170
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
260
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
オンデバイスAIとXcode
ryodeveloper
0
120
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
技術的負債の正体を知って向き合う
irof
0
260
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Embracing the Ebb and Flow
colly
88
4.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
The Language of Interfaces
destraynor
162
25k
The Pragmatic Product Professional
lauravandoore
36
7k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Navigating Team Friction
lara
190
15k
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