javascript - 浅渲染组件和 scryRenderedComponentsWithType

Question

我一直在玩 reactjs TestUtils。这真令人沮丧。我不确定，但经过几个小时的实验。在我看来，浅渲染组件后，我无法使用 findRenderedComponentWithType 或 scryRenderedComponentsWithType。事实上，我不确定如何从 ReactComponent 树 中按类型提取对象。我不确定为什么，因为我是 reactjs 的新手，而且我不确定我能做什么或不能做什么。

例子:

var Layout = React.createClass({
    render: function(){
        console.log(this.props);
        return (
            <div id="data-trader">
                <header className="header">
                    <LogoElement />
                    <UserMenu user={this.props.user} />
                </header>
                <div className="container max">
                    <div className="main">
                        <RouteHandler path={ this.props.path } query={ this.props.query } params={ this.props.params } user={this.props.user} />
                    </div>
                    <Footer />
                </div>
            </div>
        );
    }
});

测试:

describe('Shallow Layout', function(){
    beforeEach(function(){
        fakeDOM = TestUtils.createRenderer();
    });

    // PASS    
    it('should exist as a component', function(done){
        expect(<Layout/>).to.exist;
        done();
    });

    // PASS
    it('should have id=data-trader', function(done){
        fakeDOM.render(<Layout />);
        component = fakeDOM.getRenderOutput();

        expect(component.props.id).to.eql('data-trader');
        done();
    });

    it('get children', function(done) {
        var StubbedComponent = TestHelpers.stubRouterContext(component);
        var k = TestUtils.findRenderedComponentWithType(StubbedComponent, UserMenu);
        console.log(k.length);
        done();
    })
});

我在使用 findRenderedComponentWithType 时遇到此错误

Error: Did not find exactly one match for componentType:function UserMenu()

Answer 1

我遇到了同样的问题，在查看代码后我发现问题是 scry/find 调用 findAllInRenderedTree 并测试 DOM 元素:

https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js#L48和 https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js#L62

鉴于两个测试都返回 false，该方法返回一个空数组。 (这会导致您在 find 中描述的错误，并导致 scry 返回一个空数组)。

我认为这是因为 shallowRender 的输出不是 DOM 元素(这就是为什么 shallowRendere 很棒 :)。

如果你想找到特定类型的 shallowRendered 树的第一个 child ，你可以这样做:

  findChildrenOfType (view, Component) {
    if (!view) return null;

    if (reactTestUtils.isElementOfType(view, Component)) return view;

    if (view.length) { // is an Array
      for (let i = 0; i < view.length; i++) {
        let found = this.findChildrenOfType(view[i], Component);
        if (found) return found;
      }
    } else {
      if (!view.props || !view.props.children) return null;
      let children = view.props.children;

      return this.findChildrenOfType(children, Component);
    }
  }

希望这对您有所帮助!