Don't make mockComponent depend on Jest

[emorikawa]

I was expecting to use mockComponent like this:

MyMockedComponentClass = React.addons.TestUtils.mockComponent(MyComponentClass);

https://github.com/facebook/react/blob/v0.12.0/src/test/ReactTestUtils.js#L244
But after looking at the source of mockComponent it requires to be passed a Jest mock. I already use node-jasmine as my test runner.

Why does this depend on Jest?

[jstejada]

👍

[turadg]

Agreed, React seems to assume Jest for testing.

[morlay]

Seems we can use rewire to replace the mockComponent() by this way:

var rewire = require('rewire');
var MockComponent = require('./mock-component.jsx');
var TargetComponent = rewire('./TargetComponent.jsx');

TargetComponent.__set__('RequiredComponent', MockComponent);

However, we hope the Test Helper is not depend on all-in-one testing tool.

[roberto]

👍

[daegren]

👍

[AnthonyRinaldi]

👍

[oveddan]

This will be equally tough to break free from Jest with the latest revision to ReactTestUtils.js:

https://github.com/facebook/react/blob/0.13-stable/src/test/ReactTestUtils.js#L257

The challenge of breaking free from Jest here really boils down to the fact that the way other mocking libraries would stub/spy on the render method uses different syntax. For example, with sinon, you would use a stub, and do:

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

    sinon.stub(module.prototype, "render", function() {
      return React.createElement(
        mockTagName,
        null,
        this.props.children
      );
    });

    return this;
  },

It almost feels as if this mockComponent method does not belong here - but in something jest specific like ReactJestUtils

@sebmarkbage

[sebmarkbage]

mockComponent is legacy and is not needed by Jest anymore really.

[koba04]

Is there any plan to remove mockComponent?

[maksad]

@oveddan 👍 thanks, works perfectly

[sebmarkbage]

Our preferred way of testing React is now using shallow rendering. http://facebook.github.io/react/docs/test-utils.html#shallow-rendering

This doesn't suffer from the need to mock your components, and even if you do it doesn't do anything.

[rvignesh89]

This is very useful. But according to the docs it is still an experimental feature. Is the docs going to be changed soon?

[carpeliam]

We'll investigate shallow rendering - we were a little surprised to find Jest dependencies in React's test utils. Please either document the dependency or (much preferred please) don't depend on Jest. We believe that there are still cases where shallow rendering isn't appropriate and it'd be great to have some guidance on how best to mock components in this case, React's testing page would be the clear place to explain this.