Jestのスナップショットテストでテストはしばらくいいかなぁと思っていたのですが、これだけだとちょっと物足りない感がしてきたので通常のテストもやるようにしています。

Airbnbがenzymeというライブラリを出しているので、それを使ってみました。

インストール

$ npm i --save-dev enzyme

Jestとかのセットアップについては、Jestを使ってReactのコンポーネントをスナップショットテストしてみる – WP-Kyotoあたりをみてください。

最小限のテスト

enzymeを使った一番規模の小さいテストは、こんな感じです。

tests_/App.test.js

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

it('renders without crashing', () => {
  shallow(<App />);
});

shallow()で指定したReactコンポーネントをレンダリングさせています。
もしレンダリングに失敗した場合はテストがこけるので、「少なくともコンポーネントは壊れていない」というテストはできるかと思います。

power-assertと組み合わせる

Power Assertやmochaを使ったアサーションもできます。

$ npm i --save-dev power-assert

してから、以下のようにテストを書きます。

tests_/App.test.js

import { shallow } from 'enzyme';
import React from 'react';
import assert from 'power-assert';
import App from './App';

it('renders without crashing', () => {
  const component = shallow(<App />);
  assert.equal(component.type(), 'div');
  assert.equal(component.find('#app-meta').type(), 'span');
});

１つめはtype()で<App>のタグを取得して、それがdivかどうかをテストしています。
もう１つはfind()で指定したidを持つ要素を取得して、type()を用いてそれがspanタグかどうかをテストしています。

React Router (v4)を使っている場合

React Routerを使ってる場合は、MemoryRouterでラップします。

import { shallow } from 'enzyme';
import React from 'react';
import assert from 'power-assert';
import { MemoryRouter as Router } from 'react-router-dom';
import App from './App';

it('renders without crashing', () => {
  const component = shallow(<Router><App /></Router>);
  assert.equal(component.type(), Router);
});

Tag: enzyme

enzymeでReactコンポーネントをテストする（導入編）