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

Question

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

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

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

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

我收到这个错误：

Invariant Violation: findAllInRenderedTree(...): instance must be a composite component 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 实例的组件（即你定义为类的反应组件并注册为与 [ 反应的组件=19=]).

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

React Test : Finding Component within Component

reactjs

reactjs-testutils