使用酶反应测试组件WillReceiveProps答案

【问题标题】：React test componentWillReceiveProps using enzyme使用酶反应测试组件WillReceiveProps
【发布时间】：2017-08-16 12:15:35
【问题描述】：

我将使用酶测试生命周期函数，包括 componentWillReceiveProps。

首先，我的组件应该被包装materialUi styles 并与redux 连接。否则渲染功能会出现bug，因为我使用了包括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，因为酶不允许应用非根组件。我无法通过更改 props 来测试 componentWillReceiveProps 或其他必要部分。

如何设置/更改 MyComponent 的 props 以便测试 componentWillReceiveProps？

【问题讨论】：

标签： unit-testing reactjs material-ui jestjs enzyme

【解决方案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 文档中描述的方式测试组件本身：Testing Connected Components

很快 - 导出组件和连接的组件，然后通过传递道具测试组件。带导出的组件示例：

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(...);
});

【讨论】：

【解决方案2】：

如果你想测试 MyComponent，你应该

const wrapper = mount(MyComponent);

Provider 等其他东西不是 MyComponent 的一部分，因此不应包含在它的单元测试中。

【讨论】：

如果是这样，由于我渲染了material-ui按钮
那么你应该模拟 material-ui 按钮，因为这超出了单元测试的范围。