React 0.14.5 Composite Components and Children's public methods

Question

I'm trying to test the public method on a React Class. This is easy enough as you can see in the first spec, but if I need to provide context, the component needs to be wrapped in a composite component and I can't see a way to get to the child's public method (second spec).

 it('consider this', function(){
        var Stub = React.createClass({
            doSomething: function() {
                console.log('whoohoo!');
            },
            render: function(){
                return null
            }
        });

        var StubElement = TestUtils.renderIntoDocument(React.createElement(Stub, {}));

        StubElement.doSomething(); //should log
 });

 it.only('now consider this with a context', function(){
     var Stub = React.createClass({
         contextTypes: {
             location: React.PropTypes.object
         },
         doSomething: function() {
             console.log('whoohoo!', this.context.location.pathname);
         },
         render: function(){
             return null
         }
     });

     var ContextWrapper = React.createClass({
         childContextTypes: {
             location: React.PropTypes.object
         },
         getChildContext: function() {
             return {
                 location: window.location
             }
         },
         render: function() {
             return React.createElement(Stub, {})
         }
     });
     var StubElement = TestUtils.renderIntoDocument(React.createElement(ContextWrapper, {}));

     console.log(StubElement);
     // how do I get public access to doSomething() ?

 });

Any ideas about how to get to that method? Thanks!

Answer 1

You can use findRenderedComponentWithType to locate the component itself.

it.only('now consider this with a context', function(){
    var Stub = React.createClass({
        contextTypes: {
            location: React.PropTypes.object
        },
        doSomething: function() {
             console.log('whoohoo!', this.context.location.pathname);
        },
        render: function(){
            return null
        }
    });

    var ContextWrapper = React.createClass({
        childContextTypes: {
            location: React.PropTypes.object
        },
        getChildContext: function() {
            return {
                location: window.location
            }
        },
        render: function() {
            return React.createElement(Stub, {})
        }
     });
     var ContainerComponent = TestUtils.renderIntoDocument(React.createElement(ContextWrapper, {}));
     var StubComponent = TestUtils.findRenderedComponentWithType(ContainerComponent, Stub);

      console.log(Stub.doSomething);

 });