https://gyazo.com/c17d110aaf6d0274ac3d236a506adccd

アーカイブは動画

フロントエンド開発のための実践「テスト」手法

350人ほど回答

https://gyazo.com/ab2655b355e927ba64b24b8fc6c27367

フロントエンドテストを書く目的

テストの目的

サービスの「品質」を保ち続けること

自動テストは「品質」を担保する

狩野モデル

当たり前品質

一元的品質

魅力的品質

無関心品質

逆品質

table:狩野モデル

当たり前品質 ボタンが押せて、遷移できる（欠陥がない）

一元的品質 画面がサクサク遷移し、レスポンスが良い（非機能面が優良）

魅力的品質 競合にないUIで、作業効率化のために欠かせない（差別化）

当たり前品質の担保、リグレッションテスト

一元的品質、パフォーマンステスト・アクセシビリティテスト

Testing Library

a11yの当たり前品質

テストがない状況からの脱却

https://gyazo.com/480b7a73ac33ae984bd46860408c0233

https://gyazo.com/a89c4087e9f8824f580756441d301bbb

https://gyazo.com/2af8f2ea9f12e874cd3f421b8847bc90

ロードマップ例

ページ相当のコンポーネントをStory登録

MSW Storybook Addonを活用し、ページのStoryを複数登録

Storybook Play fnctionを活用し、機能テストを追加する

Storybook Test runnerがCIで実行されるように設定

コンポーネントを細分化していく

コンポーネントから処理を切り出す

切り出した処理の単体テストを拡充する

切り出したコンポーネントのa11yを当たり前に