EnzymeでReactコンポーネントをテストする

React コンポーネントのテストのために、Enzyme というツールを導入したのでその方法をまとめる。

Enzyme とは

Enzymeは React コンポーネントのテストを容易にするツール。

React コンポーネントを評価して描画するためには、仮想 dom の環境が必要になる。

Enzyme はテストの際にそこを担ってくれ、さらにテストのためのユーティリティも提供してくれる。

Enzyme の導入例

create-react-appで構築した環境に導入するのであれば、以下を実行。

1
2
3
$ yarn add enzyme \
enzyme-adapter-react-16 \
react-test-renderer
  • enzyme: Enzyme 本体
  • enzyme-adapter-react-16: React16 のためのアダプタ
  • react-test-renderer: Enzyme の依存モジュール

Enzyme の使用例

create-react-appで構築した環境に導入する場合、テスティングフレームワークにはJestを使うのが楽。

Enzyme のセットアップ

Enzyme でテストを始めるために、以下を行う。

  • src/setupTests.jsを追加して、Adapter を初期化するように設定する。
  • src/App.test.jsを Enzyme を利用するように修正する
  • npm testを実行して、動作確認をする。

src/setupTests.js

1
2
3
4
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() })

src/App.test.js

1
2
3
4
5
6
7
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('renders without crashing', () => {
shallow(<App />);
});

テストを実行

1
$ npm test

動作すれば、Jest+Enzyme でテストを行う環境が整ったことになる。

単純なコンポーネントの描画テスト

テスト対象コンポーネントは以下のようにする。

src/HelloWorld.js

1
2
3
4
5
6
7
import React, { Component } from 'react';
export class HelloWorld extends Component {
render() {
return <span>Hello world!</span>
}
}

上記をテストするファイルは以下のようにする。

src/HelloWorld.test.js

1
2
3
4
5
6
7
8
9
import { shallow } from 'enzyme'
import HelloWorld from './HelloWorld'
it('works', () => {
const wrap = shallow(
<HelloWorld />
)
expect(wrap.text()).toEqual('Hello wolrd!')
})

より詳しいテスト

公式の API ドキュメントEnzyme チートシートが参考になる。

React のテストの考え方

テストの対象

以下の観点からテストを行う。

  • レンダリングされること
  • プロパティに対するアウトプット
  • 状態をテストする
  • イベントをテストする
  • エッジケースをテストする

Redux でいう Container コンポーネントと、Presentatinal コンポーネントでもテストの方法は当然異なるはずなので、うまく使い分ける。

shallow rendering を積極的に使う

shallow rendering は、第一階層の深さのコンポーネントだけをレンダリングする。

これを用いることでテスト対象のコンポーネントの依存コンポーネントを気にすることなくテストが出来る。

shallow rendering の例

例えば、nameageを持つ、enployeeというようなコンポーネントがあるとする。

1
2
3
4
5
6
let Employee = ({employee}) => (
<span>
<Name employee={employee}/>
<Age employee={employee}/>
</span>
)

上記コンポーネントを shallow rendering した場合、nameageは評価されず、以下のようになる。

1
2
3
4
<span>
<Name employee={employee}/>
<Age employee={employee}/>
</span>

これにより、依存するコンポーネントの変更を、利用するコンポーネントに影響させずにテストが出来る。

補足

Enzyme は、React だけでなく、React Native のテストにも利用できる。

組み合わせるテスティングフレームワークは Jest に限らず Mocha なども利用できる。

参考資料