test
reactjs
react-router
enzyme

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

More than 1 year has passed since last update.


概要

通常のシンプルなStateless Functional Componentsの場合、Shallow Renderingで大丈夫だが、

react-routerwithRouter()でラップしていると、正しくレンダリングがされない問題があった。

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コンポーネントのフルレンダリングテスト