Question

我可以在下面代码中的第一个'finder'找到一个组件

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

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

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

我收到此错误：

不变违规：findAllInRenderedTree（...）：实例必须是a 复合材料 at invariant（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')
  });
});

Answer 1

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

您可以在输入中添加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做出反应的组件）。

反应测试：在组件

1 个答案: