Question

所以我尝试在使用redux-form和酶的同时为我的组件编写测试。到目前为止，对于我的简单组件，我已经创建了以下功能

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>

使用一般功能用酶测试还原形式

1 个答案: