2016-09-25 2 views
0

내 반응 + 유성 앱의 대부분의 구성 요소는 React.createClass API를 사용합니다.Enzyme 테스트 유틸리티가 React.createClass와 함께 작동합니까?

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) 

하지만 경우이 오류를 shallow 던졌습니다 사용하여, 또한

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) 

: 나는 render 또는 mount를 사용하여 테스트 파일에의 렌더링 사용하려고하면 , 그것은 다음과 같은 오류가 발생합니다 React.Component API를 사용하여 구성 요소를 렌더링하면 완벽하게 작동합니다. 이제 내 질문은 enzyme이 이전 React.createClass API를 지원합니까?

답변

1

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