web-dev-qa-db-ja.com

Material UIコンポーネントを含むコンポーネントをテストするために、コンテキストをEnzyme mountメソッドに渡す方法は？

Enzymeのmountを使用して、複数のMaterial UIコンポーネントがネストされているコンポーネントをテストしようとしています。テストを実行するとこのエラーが発生します。

TypeError: Cannot read property 'prepareStyles' of undefined

少し掘り下げた後、 テーマをコンテキストで伝える必要があることがわかりました 。私はテストでそれを行っていますが、それでもこのエラーが発生します。

私のテスト：

import expect from  'expect';
import React, {PropTypes} from 'react';
import {mount} from 'enzyme';
import SearchBar from './SearchBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

function setup() {
  const muiTheme = getMuiTheme();

  const props = {
    closeSearchBar: () => {},
    fetchSearchData: () => {},
    data: [],
    searching: false
  };

  return mount(<SearchBar {...props} />, {context: {muiTheme}});
}

describe('SearchBar Component', ()=> {

  it('Renders search toolbar properly', () => {
    const wrapper = setup();
    expect(wrapper.find('.toolbar').length).toBe(1);
    expect(wrapper.find('button').length).toBe(1);
  });
});

私の検索バーコンポーネントはステートレスコンポーネントなので、どのようなコンテキストでもプルしません。しかし、私がいるときでも、同じエラーが表示されます。

私は何を間違えていますか？

material-uienzyme
28
Erika

childContextTypesオプションにmountを追加してみてください：

return mount(
  <SearchBar {...props} />, {
    context: {muiTheme},
    childContextTypes: {muiTheme: React.PropTypes.object}
  }
);

それを行うことにより、Enzyme wrapperを設定して、コンテキストを通じてmuiThemeをその子に利用可能にします。

48
Nícolas Iensen

これは、浅いマウントでマテリアルUIをテストするための私の便利な方法です

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

const muiTheme = getMuiTheme();
const shallowWithContext = (node) => shallow(node, {context: {muiTheme}, childContextTypes: {muiTheme: PropTypes.object}});

const mountWithContext = (node) => mount(
  node, {context: {muiTheme}, childContextTypes: {muiTheme: PropTypes.object}}
);


// now you can do
const wrapper = shallowWithContext(<Login auth={auth} onChange={() => 'test'} />);
2
STEEL