React 测试：在组件中查找组件答案

【问题标题】：React Test : Finding Component within ComponentReact 测试：在组件中查找组件
【发布时间】：2017-10-19 17:50:48
【问题描述】：

我可以在下面代码的第一个“查找器”中找到一个组件

var myComponent = ReactTestUtils.findRenderedDOMComponentWithClass(myDiv, 'myComponent')

如果我随后使用返回的 Component 对象并使用它来查找更深的对象，如下所示：

var myInput = ReactTestUtils.findRenderedDOMComponentWithClass(myComponent, 'myInput')

我收到此错误：

Invariant Violation: findAllInRenderedTree(...): instance must be a 复合组件在不变量（node_modules/fbjs/lib/invariant.js:44:15）

我无法弄清楚 findRenderedDOMComponentWithClass 返回的类型是什么，因为 (a) Javascript 和 (b) ReactTestUtils 有 barely any documentation。

我的整个测试如下所示：

import ReactTestUtils from 'react-dom/lib/ReactTestUtils';

describe('simple test', function() {

  jsdom({ skipWindowCheck: true });

  it('Getting Simulate to Work', function() {
    class SomeComponent extends React.Component {
      render() {
        return (
          <div className="myComponent">
            <input type="textfield" className="myInput" ></input>
            <span className="child1" />
          </div>
        );
      }
    }
    var myDiv = ReactTestUtils.renderIntoDocument(
      <SomeComponent/>
    );
    var myComponent = ReactTestUtils.findRenderedDOMComponentWithClass(myDiv, 'myComponent')
    var myInput = ReactTestUtils.findRenderedDOMComponentWithClass(myComponent, 'myInput')
  });
});

【问题讨论】：

标签： reactjs reactjs-testutils

【解决方案1】：

您收到该错误是因为 myInput 不是复合组件。这是本机浏览器输入。复合组件是由 React.Component 组成的组件（不是 div、span、输入或按钮等）。

您可以改为在输入中添加ref：

<input type="textfield" className="myInput" ref="myInput">

并使用React.findDOMNode:

找到它

React.findDOMNode(this.refs.myInput)

（这里的this 是指包含输入的组件的一个实例，这意味着在您的情况下，您需要在某处的 SomeComponent 的定义中调用它）。

然后您应该只使用findRenderedDOMComponentWithClass 来查找属于React.Component 实例的组件（即，您定义为类的反应组件并注册为与class SomeComponent extends React.Component 反应的组件）。

【讨论】：