0

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

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

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

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

我收到此错误：

不变量违规：findAllInRenderedTree(...)：实例必须是不变量的复合组件 (node_modules/fbjs/lib/invariant.js:44:15)

我无法弄清楚findRenderedDOMComponentWithClass返回的类型是什么，因为 (a) Javascript 和 (b) ReactTestUtils几乎没有任何文档。

我的整个测试看起来像这样：

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')
  });
});
4

1 回答 1

1

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

您可以改为将 a 添加ref到您的输入中：

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

并使用以下方法找到它React.findDOMNode：

React.findDOMNode(this.refs.myInput)

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

然后你应该只用findRenderedDOMComponentWithClass它来查找作为实例的React.Component组件（即你定义为类的反应组件并注册为一个带有 react with 的组件class SomeComponent extends React.Component）。

于 2017-05-19T14:36:57.440 回答