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

WHO AM I 2 小澤 力也（おざわ りきや）@rikipedia_uw ● 株式会社ウィルゲート ● エンジニア・広報 ● 技術：JavaScript(TS)・React(8ヶ月) ● React LT会にずっと参加したかった

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

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

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

Jestとは？ 6 Jest(ジェスト) ● Facebook謹製JavaScriptのユニットテ ストツール ● オールインワンなテストフレームワーク ○ テストランナー ○ アサーション ○ テストモック・テストダブル ○ スナップショットテスト

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

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

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

テストを導入する目的 ● バグの混入を防ぐ・検知する ● テスタブルなコードを意識して書ける ● 一貫性のあるテスト観点になる ● 品質を担保しつつ、テスターは別のテストを実施することができ る ● テストカバレッジにより定量的に品質を測定できる 10 ↑メリットを活かすためのテストコードを書く

テスト対象 ● Function Component ○ 純粋関数 11

テスト対象 ● Function Component ○ 純粋関数 12 Container Component(Redux接続部)やRedux Storeの テストは次の機会

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

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

スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(Facebook) .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(Facebook) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(Facebook) .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(Facebook) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(Facebook) .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(Facebook) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx

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

スナップショットテストファイル exports[`renders correctly 1`] = ` Facebook ` 19 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap

スナップショットテストファイル exports[`renders correctly 1`] = ` Facebook ` 20 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap 手動での書き換えは怒られる

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

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

　 以上 23

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

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