とうとうJestを導入してみた話

Transcript

1. とうとうJestを導入してみた話 React LT会 〜最近学び始めた方から業務でバリバリ使っている方まで〜 1

2. WHO AM I 2 小澤 力也（おざわ りきや）@rikipedia_uw • 株式会社ウィルゲート •

   エンジニア・広報 • 技術：JavaScript(TS)・React(8ヶ月) • React LT会にずっと参加したかった

3. 想定聴者 • React中級者 • React環境にテストを導入したいひと 3

4. Jestを導入したアプリケーション • 新規開発中のSPA ◦ React+Redux+TypeScript 4

5. Jestを導入したアプリケーション 5

6. Jestとは？ 6 Jest(ジェスト) • Facebook謹製JavaScriptのユニットテ ストツール • オールインワンなテストフレームワーク ◦ テストランナー

   ◦ アサーション ◦ テストモック・テストダブル ◦ スナップショットテスト

7. Jestを導入した背景 • 開発当初は体制や納期の問題でテストに手を出せなかった ◦ シナリオテストやふるまいテストはやってた 7

8. Jestを導入した背景 • 開発当初は体制や納期の問題でテストに手を出せなかった ◦ シナリオテストやふるまいテストはやってた →落ち着いてきたのでテスト導入に至った 8

9. テストを導入する目的 • バグの混入を防ぐ・検知する • テスタブルなコードを意識して書ける • 一貫性のあるテスト観点になる • 品質を担保しつつ、テスターは別のテストを実施することができ る

   • テストカバレッジにより定量的に品質を測定できる 9

10. テストを導入する目的 • バグの混入を防ぐ・検知する • テスタブルなコードを意識して書ける • 一貫性のあるテスト観点になる • 品質を担保しつつ、テスターは別のテストを実施することができ る

    • テストカバレッジにより定量的に品質を測定できる 10 ↑メリットを活かすためのテストコードを書く

11. テスト対象 • Function Component ◦ 純粋関数 11

12. テスト対象 • Function Component ◦ 純粋関数 12 Container Component(Redux接続部)やRedux Storeの

    テストは次の機会

13. テスト手法 • スナップショットテスト ◦ UIが予期せず変更されていないか確かめるテスト手法 13

14. React×Jestにおけるスナップショットテスト • コンポーネントの出力結果をファイルに保存 • 1回目ならファイル作成 • 2回目以降は前回との差分を見てOKなら通過 14

15. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 15 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

16. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 16 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 必要なライブラリなどを import import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

17. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 17 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing Reactコンポーネントを生成し、 Json形式に変換 import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

18. スナップショットテストの書き方 import React from 'react' import Link from '../Link.react' import

    renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) 18 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 1回目：スナップショットファイル生成 2回目以降：前回のファイルと比較して OKなら通過 component.test.tsx

19. スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}

    onMouseLeave={[Function]} > Facebook </a> ` 19 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap

20. スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}

    onMouseLeave={[Function]} > Facebook </a> ` 20 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap 手動での書き換えは怒られる

21. スナップショットテストを導入してみて • テスタブルなコードを意識するとロジックとUIが自然に分離す る • ロジックの実装に集中できるようになった • 実装が変わったときに差分が出るからバグの検知が楽になっ た 21

22. スナップショットテストで気をつけたいこと • 期待する出力が明確になってから行う ◦ 間違ったテストになってしまうため • React Hooksも一部対応しているが完璧ではない 22

23. 　 以上 23

24. 懇親会で話したいこと • webpack周りの設定どうしてる？ • Class Componentのこれからについて 24

25. Follow Me! 25 https://twitter.com/rikipedia_uw