ReactTestUtils.mockComponent does not pass props

[awei01]

In using mocked components in test, all props don't get passed to the ConvenienceConstructor mocked component. Only the this.props.children get passed. Is there a particular reason that this.props don't get passed as well? I think it would make asserting that certain props get passed down to the sub-module easier.

Looking at ReactTestUtils.js (https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js#L254):

mockComponent: function(module, mockTagName) {
    mockTagName = mockTagName || module.mockTagName || "div";

    var ConvenienceConstructor = React.createClass({displayName: 'ConvenienceConstructor',
      render: function() {
        return React.createElement(
          mockTagName,
          null, // why isn't this this.props to allow for assertions on passed props?
          this.props.children
        );
      }
    });

...

After doing a little more digging, I found some more info. Given the module:

module.exports = React.createClass({
    _renderItems: function() {
        return this.props.items.map(function(item, index) {
            return <Child key={ index } somePassedProp={ item }/>
        });
    },
    render: function() {
        var items = this._renderItems();
        return <Parent ref="parent" someProp="foo">{items}</Parent>;
    }
});

The props do get passed properly and can be asserted when accessing the mocked component using a named ref. Thus, you can assert that component.refs.props.someProp = "foo". However, unless I'm missing something, you cannot access all of the props of a sub-module that is iterated over: var children = TestUtils.scryRenderedDOMComponentsWithTag(component, 'CHILD'); children[0].props.somePassedProp will always be undefined.

[liambrown89]

I agree with awei01 - it would be nice to be able to easily assert the props that are being passed to a sub component.

[liambrown89]

Any word/news/comment on this?

[gaearon]

mockComponent is neither maintained and not recommended. Please either use shallow rendering instead, or mock components with Jest which gives you an ability to pass anything.