使用酶反应测试组件WillReceiveProps

Question

我将使用酶测试生命周期功能,包括componentWillReceiveProps.

在其他任何事情之前,我的组件应该包裹materialUi样式并与redux连接.否则,渲染函数中会出现错误,因为我使用了包括FlatButton在内的material-ui组件.

const wrapper = mount(
      <MuiThemeProvider muiTheme={muiTheme}>
         <Provider store={store}>
            <MemoryRouter>
               <MyComponent />
            </MemoryRouter>
         </Provider>
      </MuiThemeProvider>)

// absolutely fail
wrapper.find(MyComponent).setProps({ something })
expect(MyComponent.prototype.componentWillReceiveProps.calledOnce).toBe(true)

所以问题是我不能将setProps()用于MyComponent,因为酶不允许应用非根组件.我无法通过改变道具来测试componentWillReceiveProps或其他必要的部分.

如何设置/更改MyComponent的道具以便我可以测试componentWillReceiveProps？

Answer 1

最好单独测试组件.问题是material-ui使用React传递它的道具context.您可以通过以下方式指定组件的上下文:

import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const wrapper = mount(
  <MyComponent />,
  {
    context: {
      muiTheme: getMuiTheme(),
    },
    childContextTypes: {
      muiTheme: React.PropTypes.object.isRequired,
    }
  }
);

您需要隔离组件的另一件事是删除<Provider>.而不是测试连接的组件尝试按照Redux文档中描述的方式测试组件本身:测试连接组件

短时间 - 导出组件和连接组件,然后通过传递道具测试组件.带导出的组件示例:

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class MyComponent extends Component { /* ... */ }

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(MyComponent)

您现在可以在测试文件中导入未修饰的组件,如下所示:

import { MyComponent } from './MyComponent';

最后的测试可能看起来像这样:

import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MyComponent } from './MyComponent';

test('test component', () => {
  const wrapper = mount(
    <MyComponent />,
    {
      context: {
        muiTheme: getMuiTheme(),
      },
      childContextTypes: {
        muiTheme: React.PropTypes.object.isRequired,
      }
    }
  );

  // Test something
  const p = wrapper.find(...);
  expect(...).toEqual(...);

  // Change props
  wrapper.setProps({foo: 1});

  // test again
  expect(...).toEqual(...);
});