withRouterでラップされたReactコンポーネントをenzymeでテストしたい

概要

通常のシンプルなStateless Functional Componentsの場合、Shallow Renderingで大丈夫だが、
react-routerのwithRouter()でラップしていると、正しくレンダリングがされない問題があった。

import React from 'react';
import {withRouter} from 'react-router';

export default withRouter(class TestComponent extends React.Component {
  ...
}

解決法

Full DOM Renderingをすることでテストが無事通りました。

*.spec.js

import assert from 'power-assert';
import {mount} from 'enzyme';

...

describe('TestComponent', () => {
    it('.button', () => {
        const testComponent = mount(<TestComponent />);
        assert.equal(testComponent.find('.button').length, 1);
    });
});

setup.js

require('babel-register')();

import {jsdom} from 'jsdom';

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach(property => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

global.navigator = {
    userAgent: 'node.js'
};

package.json

"test": "mocha --require ./test/setup.js --compilers js:babel-register"

Material-UIを使っている場合

Material-UIコンポーネントを使っている場合、以下のようなエラーが出ることがありました。

Warning: Failed context type: Required context `muiTheme` was not specified in `FlatButton`.

Material-UI#v0.15.0
テーマファイルの指定が必須になっているので、そこでコケているようです。

なので、こうする。

*.spec.js

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

...

const testComponent = mount(<MuiThemeProvider><TestComponent /></MuiThemeProvider>);

未解決問題

イベント発火のテストがうまくいってません。

Full DOM Rendering時に.simulate()がうまく動いてくれていない…？
findDOMNodeで、TestUtils.Simulateという代替案？も載っていたのですが、まだうまいこと動かせていません。

以下それっぽいissue（英語力が足りない）
https://github.com/airbnb/enzyme/issues/99
https://github.com/callemall/material-ui/issues/4200

参考

enzyme+mocha+power-assertでReactコンポーネントのフルレンダリングテスト