淺層渲染組件和scryRenderedComponentsWithType

我一直在玩reactjsTestUtils。這非常令人沮喪。我不確定，但經過幾個小時的試驗。在我看來，淺顯渲染一個組件後，我不能使用findRenderedComponentWithType或scryRenderedComponentsWithType。實際上，我不知道如何從ReactComponent tree中提取出它的類型。我不知道爲什麼，因爲我對reactjs非常陌生，我不確定我能做什麼或不能做什麼。淺層渲染組件和scryRenderedComponentsWithType

例如：

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

來源

2015-08-19 Liondancer

我有同樣的問題，並通過代碼去之後，我發現這個問題是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); 
    } 
    }

希望這有助於！

來源

2015-08-24 17:51:16 GiaNU

淺層渲染組件和scryRenderedComponentsWithType

回答

相關問題