使用一般功能用酶测试 redux-form

Question

所以我正在尝试使用 redux-form 和 enzyme 为我的组件编写测试。到目前为止，对于我的简单组件，我已经创建了以下函数

export const mountWithContext = (node, store) => {
  const nodeToMount = store ? <Provider store={store} >{node}</Provider> : node;
  return mount(nodeToMount);
};

问题是当我尝试使用 react-redux 时它也失败了。尝试做：

class Form extends Component {
  render() {
    return <div><TestComponent /></div>
  }
}

const TestForm = reduxForm({ form: 'testForm' })(Form);
const enzymeWrapper = mountWithContext(TestForm, store)

我收到以下错误

'Warning: Failed prop type: Invalid prop `children` of type `function` supplied to `Provider`, expected a single ReactElement.
Invariant Violation: React.Children.only expected to receive a single React element child.

知道为什么会发生这种情况以及如何解决这个问题吗？

Answer 1

这个问题已有 6 个月了。对于运行出现类似错误消息的其他人：

<Provider>{ node }</Provider> 的渲染实际上应该是 <Provider><Node /></Provider> 或类似的东西。该错误基本上是说它需要一个元素，并且用作 { node } 而不是 <Node/> 的子元素是一个函数。

export const mountWithContext = (Node, store) => {
  const nodeToMount = store ? (
    <Provider store={store} >
      <Node />
    </Provider>
  ) : <Node />;
  return mount(nodeToMount);
};

所以只需将 node 的参数名称更改为 Node 并将 JSX 中的用法从 {node} 更改为 <Node /> 或 <Node></Node>

使用一般功能用酶测试 redux-form

Testing redux-form with enzyme using general function

redux-form

enzyme