javascript - 使用 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(...): instance must be a composite component.

我将我的代码提供为 jsbin here .

Answer 1

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

也就是说，您不能使用测试实用程序函数或 native 组件作为您正在渲染的“根”组件。相反，您需要将函数组件包装在使用 createClass 或扩展 React.Component 的包装器组件中。

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

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

像这样的陷阱可能是充分利用第三方测试库的理由，比如流行的 enzyme ，或者我自己的观点:teaspoon .两者都通过为您无缝包装和展开功能组件来抽象此类问题，因此您无需担心要呈现的组件类型。