Atomic Design とテストの○○な話

Atomic Design とテストの ◦◦ な話 2022.07.20 開発× テスト LT 会
- vol.3 #devtestlt @takfjp

自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社所属「ママリ」という出産・育児領域のサービスを開発・運営していますフロント: React,
TypeScript, jest + testing-library バックエンド: CakePHP

みなさんコンポーネントのテスト書いてますか？

Component の分け方悩みますよね〜

Atomic Design Web デザイナー Brad Frost 氏が2013 年に提案したデザインシステム

Atomic Design UI をパーツ単位で設計していく Atom > Molecules > Organisms >
Templates > Pages

弊社での取り組み事例 Atom > Molecules > Organisms に対して必ずテストを書く (Templates は使わない) コンポーネント以外のAPI
通信、カスタムフック、汎用ロジックにはテストを書くテストのカバレッジには Codecov を使う https://about.codecov.io/ Component を追加して、前回コミットよりもカバレッジが下がっている (= 追加されたコンポーネントにテストが書かれていない or 不十分である) 時にCI 上でエラーを通知する不十分な場所には reviewdog が指摘コメントをつけてくれる

Pages のテストをどうする問題基本的に、Organisms 以下のコンポーネントの組み合わせでできているという認識なのでテストは追加しない Codecov でも Pages はカバレッジの対象外にしている Pages
独自のロジックが出てくるとややこしくなる

逆に考えてみる話 Pages にテストを書かない -> テストが必要となるロジックを Pages に盛り込まないカスタムフック、汎用ロジックとして分離させておく -> 再利用可能
な形に保つ

Pages のつらみな話後から共通となるロジックが見つかったり、分離させようとするとテストの追加を必要とするロジックを分離した後、後付けでテストを書こうとすると意外に難しかったり、うまくテストコードが機能しなかったりする

Atomic Design とコンポーネントテストの教訓 Molucules 以下のテストを充実させてカバレッジを担保する Pages に結合する時ラクができるようにするため Pages にロジックを持たせず、共通化したり分離して薄く保つ
Pages の動作にはエンジニアがユーザ目線で QA を行う(QA への意識を持つ)

もしそれでもつらくなったら案として： Atomic Design を脱してコンポーネント構成を見直してみるテストをペアプロで作っていくメンバ全員のテストへの解像度を上げるにはかなり有効 jest 以外に E2E
テストを組み込んでテスト自体の堅牢性をあげる

We're Hiring! カジュアル面談やってます！ https://connehito.com/recruit/

Thank you!

Atomic Design とテストの○○な話

Atomic Design とテストの○○な話

takf

More Decks by takf

Other Decks in Programming

Featured

Transcript