Slide 1

Slide 1 text

Testing Library流でフロントエンドテストのコスパを最大化する 2022/09/08 by eatski フロントエンドLT会 - vol.8

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

本名芳賀樹生（はがいつき） H.N eatski（いとすき） twitter https://twitter.com/eatski629

Slide 4

Slide 4 text

現在フリーランスのフロントエンドエンジニア Next.js+GraphQLでWebサービスの開発をしてます。 Work 何でも人狼ゲームとして遊べる汎用役職振り分けツールを公開してます https://rollrole.web.app/

Slide 5

Slide 5 text

今回はフロントエンドのテスト（Jest,Vitest）についてお話させていただきます LTは初めてです！！お手柔らかにお願いします

Slide 6

Slide 6 text

フロントエンドのテストは辛い...

Slide 7

Slide 7 text

フロントエンドの特殊性テストで動くのに本番じゃ動かない（またはその逆）が多すぎるプログラムの正しさだけを担保すればいいわけではない

Slide 8

Slide 8 text

コスパが悪い

Slide 9

Slide 9 text

テストのコスパが悪いと、良いテストが継続的に書かれていく流れを作れない最終的にソースコードの品質は落ちる

Slide 10

Slide 10 text

では、どうするか

Slide 11

Slide 11 text

そんな時に出会ったのが、Testing Libaryでした。

Slide 12

Slide 12 text

Testing Libraryとは Jestで動作するフロントエンド特化型のテストヘルパー enzymeの代替独自の思想を持つ

Slide 13

Slide 13 text

“Testing takes too much time and effort” by Kent C. Dodds （ライブラリ作者）訳：テストには時間と労力がかかりすぎる https://testingjavascript.com/

Slide 14

Slide 14 text

「Testing Library流」でコスパのいいテストを書こう! Testing Libraryの思想を取り込みつつ自分達の文脈に合わせていい感じにテストを書こう

Slide 15

Slide 15 text

Testing Library流について、主なポイントとして2つ解説しますサンプルケースサンプルコードもあるので後ほどTwitterで共有します

Slide 16

Slide 16 text

ポイント1: 大きな粒度をテストする

Slide 17

Slide 17 text

ユーザーにとって意味のある単位をテストする単体テストより結合テスト内部で実装者の都合で分割された単体（hooksなど）をテストをしないユーザーストーリーに沿って「データフェッチ」から「DOMのレンダリング」までを結合した大きな対象(Containerコンポーネント)をテスト

Slide 18

Slide 18 text

テストケース test("API から取得したsprites.front_default を画像として表示する",async () => { render() // TODO: assertions })

Slide 19

Slide 19 text

メリットテストの数が減る（コスト減）ドキュメントとしての価値が高まる（価値増）テストの書き直しが減る（コスト減・価値増）

Slide 20

Slide 20 text

ポイント2: UI要素のアクセシビリティをテストする

Slide 21

Slide 21 text

DOMが持つロールを参照したテストを書くロールとは WAI-ARIAのロールのことその要素が意味論的に何であるか・何をするかの情報例：

ピッピ

→「ピッピ」という名前の「見出し」ロールを持つ要素がある

Slide 22

Slide 22 text

Testing LibraryのfindByRole を使う findByRole を使うとTesting Libraryが支援技術(スクリーンリーダー等)と同じようにDOM を探索してくれる await expect( screen.findByRole("heading",{name: " ピッピ"})) .resolves.toBeInTheDocument() data-testid を振る必要がない

Slide 23

Slide 23 text

メリット些細な実装・見た目の変更によって左右されない情報の本質についてテストできる（コスト減・価値増）アクセシビリティを向上させるきっかけになる（価値増）

Slide 24

Slide 24 text

まとめテストってコスパ大事！ユーザーにとって意味のあるをテストしよう！アクセシビリティを意識しよう！

Slide 25

Slide 25 text

ご清聴ありがとうございました