Jest: Mocking React components causes warnings with React 16

[pugnascotia]

I am reporting a bug, as reproduced in pugnascotia/test-jest-mock.

With React 16, when I mocked a component like so:

jest.mock('./Widget', () => 'Widget');

I routinely get warnings such as:

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: <Widget /> is using uppercase HTML. Always use lowercase HTML tags in React.

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: The tag <Widget> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

The latter is less common, but the former happens a lot in my main application. I discovered it while migrating to React 16. The tests do pass and the snapshots seem OK, but the swathe of warnings is rather alarming.

In pugnascotia/test-jest-mock, this behaviour is seem both on the master branch, which uses Jest 20, and the jest22 branch, which uses Jest 22.

Needless to say, I didn't expect to see these warnings, because I never saw them using Jest and React 15.

My versions are:

$ node --version
v6.11.1
$ uname -a
Darwin __REDACTED__ 16.7.0 Darwin Kernel Version 16.7.0: Mon Nov 13 21:56:25 PST 2017; root:xnu-3789.72.11~1/RELEASE_X86_64 x86_64
$ yarn --version
1.3.2

[SimenB]

jest.mock('./Widget', () => () => 'Widget');

It's a mock factory, so you have to pass a function which returns whatever you want to return. A string is not a valid React Element.

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

Happy to reopen if you can show it's a bug in jest

[pugnascotia]

Thanks for the response. I appreciate that this isn't a help channel, but this feels like more like a regression to me (with the caveat that googling turns up no-one having the same problem, which is suspicious).

I've updated the repo to add snapshots on both branches. If I change the jest.mock line as you suggest, I get a diff in the snapshots that I don't expect, i.e.

    -  <Widget
    -    name="fred"
    -  />
    +  Widget

However the Jest mock documentation shows jest.mock being used precisely as I am doing, and suggests I should get the output that I expect. And indeed, I do, it's the warnings that seem wrong.

[SimenB]

The docs seem wrong, then, good catch.

It's not a regression in Jest if the docs are correct for React 15 though - something in React changed. But we should either make it work again, or fix the docs. (Seems like a useful feature, so I lean towards fixing it for React 16 if there's anything we can do on our side)

@gaearon Is this a known thing/on purpose?

[gaearon]

Hmm. I guess this wouldn’t emit warnings:

jest.mock('./Widget', () => 'my-widget');

because React would treat it as a custom element.

Is that too weird?

[pugnascotia]

...yes? 😅

[gaearon]

Well.. it's kind of how the DOM works.
From React's point of view, you are just rendering a DOM tag.

You wouldn't get these messages if you used the test renderer.

[gaearon]

Here's a few options:

1) Render as text

This way you won't see the props, but it's definitely the most straightforward one:

jest.mock('./Widget', () => () => 'Widget');

2) Render as a custom element

DOM "custom elements" aren't checked for anything and shouldn't fire warnings. They are lowercase and have a dash in the name.

jest.mock('./Widget', () => 'mock-widget');

3) Use test renderer

Test renderer doesn't care about the element types and will happily accept 'Widget'.

[pugnascotia]

Aha - so if I only use react-test-renderer and not ReactDOM.render in the test, the warnings don't trigger. It's possible that part of my problem in my app's tests are from using enzyme for some of the tests. I'll look into what it does with rendering.

Separately, do we want an update to the Jest docs? I could trying and write something around this.

[SimenB]

Separately, do we want an update to the Jest docs?

Yes please!

[pugnascotia]

I raised PR #5275 to update the documentation. I'd appreciate your thoughts, @SimenB and @gaearon.