使用renderIntoDocument测试功能组件

Question

我正在学习使用ReactTestUtils库测试React无状态组件.这是我的简单组件:

import React from 'react';

const Greeter = ({name,place}) => (
  <h1>Hello,{name}. Welcome to the {place}.</h1>
);

export default Greeter;

这是我的测试规范,以获得renderIntoDocument工作,我包裹着我的招待员在一个div组件作为建议在这里:

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(...):实例必须是复合组件.

我在这里提供我的代码为jsbin .

Answer 1

由于函数组件没有与之关联的实例,因此不能直接将它们与render或renderIntoDocument一起使用.试图包装功能组件是一个好主意,不幸的是,使用a div不能用于类似的原因.DOM组件也不返回组件实例,而是返回底层DOM节点.

这就是说您不能将test utils函数或本机组件用作要渲染的"根"组件.相反,您需要将函数组件包装在使用createClass或扩展的包装器组件中React.Component.

class Wrapper extends React.Component {
  render() { 
    return this.props.children
  }
}

let component = renderIntoDocument(<Wrapper><Greeter /></wrapper>

像这样可能有足够的理由使用第三方测试库,如流行的酶,或我自己的:茶匙.通过无缝地包装和解包功能组件,这两个问题都可以解决这个问题,因此您不必担心要尝试渲染的组件类型.