我正在学习使用ReactTestUtils库测试React无状态组件.这是我的简单组件：
import React from 'react';
const Greeter = ({name,place}) => (
<h1>Hello,{name}. Welcome to the {place}.</h1>
);
export default Greeter;
这是我的测试规范,为了使renderIntoDocument正常工作,我将Greeter组件包装在一个div中,如建议here所示：
import {expect} from 'chai';
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import Greeter from '../Greeter';
describe('Greeter Components',() => {
it('renders correctly',() => {
var component = ReactTestUtils.renderIntoDocument(<div>
<Greeter name="Vamsi" place="Hotel California"/>
</div>);
var hasH1 = ReactTestUtils.findRenderedDOMComponentWithTag(component,'h1');
expect(hasH1).to.be.ok;
});
});
我收到了错误
findAllInRenderedTree(…): instance must be a composite component.
解决方法
由于函数组件没有与之关联的实例,因此不能直接将它们与render或renderIntoDocument一起使用.试图包装函数组件是一个好主意,不幸的是使用div不会出于类似的原因. DOM组件也不返回组件实例,而是返回底层DOM节点.
这就是说您不能将test utils函数或本机组件用作要渲染的“根”组件.相反,您需要将函数组件包装在使用createClass或扩展React.Component的包装器组件中.
class Wrapper extends React.Component {
render() {
return this.props.children
}
}
let component = renderIntoDocument(<Wrapper><Greeter /></wrapper>
像这样可能有足够的理由来使用第三方测试库,比如流行的酶,或者我自己的看法：teaspoon.通过无缝包装和展开功能组件来解决这类问题,所以你不要需要担心您尝试渲染的组件类型.
