reactjs - 将 enzyme.mount().setProps 与 react-redux Provider 一起使用

Question

我有一个设置 Prop 的测试，以观察组件的一些变化。唯一的麻烦是我将呈现的元素包装在 <Provider> 中因为在树的下方还有一些连接的组件。

我正在渲染

const el = () => <MyComponent prop1={ prop1 } />;
const wrapper = mount(<Provider store={store}>{ el() }</Provider>);

然后我尝试使用以下方法观察一些变化:

wrapper.setProps({ /* new props */ });
// expect()s etc.

问题是 setProps()没有在包装组件上正确设置 Prop 。我假设这是因为 <Provider>实际上并没有传递 Prop ，因为它不是 HoC。有没有比仅仅更改局部范围的 prop 变量和重新渲染更好的方法来测试它？

Answer 1

这是使用 setProps

的方法

import { Provider } from 'react-redux';


const renderComponent = properties => mount(
  React.createElement(
    props => (
      <Provider store={store}>
        <IntlProvider locale="en" defaultLocale="en" messages={messages}>
      <Router>
        <MyComponent {...props} />
      </Router>

      </Provider>
    ),
    properties))

然后在你的测试中

it('should set some props', () => {
   const renderedComponent = renderComponent(props);
   renderedComponent.setProps({ /* some props */ } });

  expect(true).toBe(true);
})