Reactにおけるテストについて勉強したことまとめ

最近はReactとReact Nativeで掲示板サイトとそのクライアントアプリを作っています。
そろそろテスト駆動開発にしたいと思ったので、テストについて調べたことをまとめます。

もしこの記事を気に入っていただけたり何か間違ったことがあったらツイッターで私(@wabisuke2718)をフォローしてリプを飛ばしていただけるとモチベーションが上がります。

参考にした本やサイトは一番下の「参考資料」にまとめてあります。

#Reactにおけるテスト
##Jestを使おう
JavaScriptでユニットテストを行うには、テストランナー（テストファイルの実行処理を行う）、アサーションライブラリ（expectなどの関数を提供する）、モックライブラリ（特定のモジュールや関数の振る舞いを偽装する）を用意する必要があるが、Jestにはこれらがまとめて入っているのでJestさえインストールすればいい。

##create-react-appでJestを使ってみる
実はJestはcreate-react-appに標準搭載されているので、この方法でプロジェクトを作成した場合、最初からJestが使えます。Reactコンポーネントを簡単にテストするためにenzyme（誰か読み方教えて）も入れます。

create-react-app jest-practice
cd jest-practice
npm install --save-dev enzyme enzyme-adapter-react-16

enzymeのセットアップファイルを下記のように用意します。（srcディレクトリの下にsetupTests.jsを作成する）

jest-practice\src\setupTests.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

ここまでで準備は完了です。次は実際のテストコードを書いていきます。
create-react-appが用意したApp.jsのテストコードが既にあるのでこれを書き換えます。

jest-practice\src\App.test.js

import React from 'react'
import { shallow } from 'enzyme'
import App from '../src/App'


test('Welcome to Reactという文字列がある', () => {
  const wrapper = shallow(<App />)
  expect(wrapper.text()).toContain('Welcome to React')
})

上のコードでAppコンポーネントが描画されたときに「Welcome to React」という文字列が含まれているかテストすることができます。

#参考資料

• 書籍「React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで」
• 書籍「React開発 現場の教科書」
• サイト「2017年JavaScriptのテスト概論」
• サイト「Jest + enzymeで行うReactのUT（ユニットテスト ）について」
• サイト「Facebook製のJavaScriptテストツール「Jest」の逆引き使用例」