Question

我一直在玩contains $(function(){ var myRows = $("#match-table tr:contains('Pending Credit')"); $("#result").html(myRows.length + " Pending"); });。这令人非常沮丧。我不确定但经过几个小时的实验。在我看来，在浅层渲染组件之后，我无法使用reactjs或TestUtils。实际上，我不确定如何从findRenderedComponentWithType中按类型提取对象。我不确定为什么我对scryRenderedComponentsWithType不熟悉，而且我不确定我能做什么或不能做什么。

示例：

ReactComponent tree

试验：

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();
    })
});

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树的第一个子节点，你可以这样做：

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

希望这有帮助！

浅渲染组件和scryRenderedComponentsWithType

1 个答案: