酶测试实用程序是否与 React.createClass 一起使用？答案

【问题标题】：Does Enzyme test utility work with React.createClass?酶测试实用程序是否与 React.createClass 一起使用？
【发布时间】：2017-02-02 22:10:07
【问题描述】：

我的 react+meteor 应用程序中的大部分组件都使用 React.createClass api。当我尝试使用render 或mount 在测试文件中渲染它们中的任何一个时，它会引发以下错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Constructor`.
at invariant (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:23890:15)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:14982:134)
at ReactCompositeComponentWrapper.performInitialMount (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15407:22)
at ReactCompositeComponentWrapper.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15298:21)
at Object.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:8128:35)
at ReactCompositeComponentWrapper.performInitialMount (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15411:34)
at ReactCompositeComponentWrapper.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15298:21)
at Object.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:8128:35)
at mountComponentIntoNode (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:20348:32)
at ReactReconcileTransaction.perform (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:9090:20)

另外，使用shallow 会引发此错误：

TypeError: Component is not a function
at packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15346:16
at measureLifeCyclePerf (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15115:12)
at ShallowComponentWrapper._constructComponentWithoutOwner (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15345:14)
at ShallowComponentWrapper.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:15228:21)
at Object.mountComponent (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:8128:35)
at ReactShallowRenderer._render (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:21853:21)
at _batchedRender (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:21834:12)
at Object.batchedUpdates (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:17599:7)
at Object.batchedUpdates (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:7770:20)
at ReactShallowRenderer.render (packages/modules.js?hash=70ab85ea6ef331c0dda6aaba437ed823158e87bb:21827:16)

但是如果我使用React.Component api 渲染一个创建的组件，它工作得非常好。现在，我的问题是，enzyme 是否支持旧的React.createClass api？

【问题讨论】：

标签： unit-testing reactjs meteor enzyme

【解决方案1】：

Enzyme 可以与React.createClass 搭配使用。请参阅以下来自Enzyme 测试之一的测试用例。

https://github.com/airbnb/enzyme/blob/master/test/ShallowWrapper-spec.jsx#L13

it('can pass in context', () => {
  const SimpleComponent = React.createClass({
    contextTypes: {
      name: React.PropTypes.string,
    },
    render() {
      return <div>{this.context.name}</div>;
    },
  });

  const context = { name: 'foo' };
  const wrapper = shallow(<SimpleComponent />, { context });
  expect(wrapper.text()).to.equal('foo');
});

【讨论】：