使用renderIntoDocument测试功能组件

Question

我正在学习使用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（...）：实例必须是复合组件。

我提供的代码为jsbin here。

Answer 1

由于函数组件没有与之关联的实例，因此不能直接将它们与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。通过无缝地包装和解包功能组件，这两个问题都可以解决这个问题，因此您不必担心要尝试渲染的组件类型。

Answer 2

在<div>中包装功能组件对我有用。你只需要搜索你想要测试的组件有点不同，即

const props = { p1: "1" }
test('Foo renders correctly classed div', () => {
  const cpt = TestUtils.renderIntoDocument(<div><Foo {...props} /></div>);
  const myNode = ReactDOM.findDOMNode(cpt.childNodes[0]);
  expect(myNode.className).toBe('my-class');
});

请注意，您可以使用myNode定位cpt.childNodes[0]进行测试

Answer 3

为了改善@ monastic-panic的答案，我的两分钱：

您不必为此创建类。动态地做：

import createReactClass from 'create-react-class';

// need to be a class component
const Clazz = createReactClass({
  render: () => {
    return <YourFunctionalComponentName {...props} />;
  },
});

ReactTestUtils.renderIntoDocument(<Clazz />);