Atomic Design とテストの○○な話

2022.07.20 開発×テスト LT会 - vol.3 #devtestlt

Transcript

1. Atomic Design とテストの ◦◦ な話 2022.07.20 開発× テスト LT 会 - vol.3 #devtestlt @takfjp
2. 自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React, TypeScript, jest + testing-library バックエンド: CakePHP
4. みなさんコンポーネントのテスト 書いてますか？
5. Component の分け方悩みますよね〜
6. Atomic Design Web デザイナー Brad Frost 氏が2013 年に提案したデザインシステ ム
7. Atomic Design UI をパーツ単位で設計していく Atom > Molecules > Organisms > Templates > Pages
8. 弊社での取り組み事例 Atom > Molecules > Organisms に対して必ずテストを書く (Templates は使わない) コンポーネント以外のAPI 通信、カスタムフック、汎用ロジックに はテストを書く テストのカバレッジには Codecov を使う https://about.codecov.io/ Component を追加して、前回コミットよりもカバレッジが下がっ ている (= 追加されたコンポーネントにテストが書かれていない or 不十分である) 時にCI 上でエラーを通知する 不十分な場所には reviewdog が指摘コメントをつけてくれる
10. Pages のテストをどうする問題 基本的に、Organisms 以下のコンポーネントの組み合わせでできて いるという認識なのでテストは追加しない Codecov でも Pages はカバレッジの対象外にしている Pages 独自のロジックが出てくるとややこしくなる
11. 逆に考えてみる話 Pages にテストを書かない -> テストが必要となるロジックを Pages に盛り込まない カスタムフック、汎用ロジックとして分離させておく -> 再利用可能 な形に保つ
12. Pages のつらみな話 後から共通となるロジックが見つかったり、分離させようとすると テストの追加を必要とする ロジックを分離した後、後付けでテストを書こうとすると意外に難 しかったり、うまくテストコードが機能しなかったりする
13. Atomic Design とコンポーネントテス トの教訓 Molucules 以下のテストを充実させてカバレッジを担保する Pages に結合する時ラクができるようにするため Pages にロジックを持たせず、共通化したり分離して薄く保つ Pages の動作にはエンジニアがユーザ目線で QA を行う(QA への意 識を持つ)
14. もしそれでもつらくなったら 案として： Atomic Design を脱してコンポーネント構成を見直してみる テストをペアプロで作っていく メンバ全員のテストへの解像度を上げるにはかなり有効 jest 以外に E2E テストを組み込んでテスト自体の堅牢性をあげる
15. We're Hiring! カジュアル面談やってます！ https://connehito.com/recruit/
16. Thank you!