Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mocking React components causes warnings with React 16 #5258

Closed
pugnascotia opened this issue Jan 9, 2018 · 11 comments · Fixed by #5275
Closed

Mocking React components causes warnings with React 16 #5258

pugnascotia opened this issue Jan 9, 2018 · 11 comments · Fixed by #5275

Comments

@pugnascotia
Copy link
Contributor

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
Copy link
Member

SimenB commented Jan 9, 2018

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

@SimenB SimenB closed this as completed Jan 9, 2018
@pugnascotia
Copy link
Contributor Author

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
Copy link
Member

SimenB commented Jan 9, 2018

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?

@SimenB SimenB reopened this Jan 9, 2018
@gaearon
Copy link
Contributor

gaearon commented Jan 9, 2018

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
Copy link
Contributor Author

...yes? 😅

@gaearon
Copy link
Contributor

gaearon commented Jan 9, 2018

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
Copy link
Contributor

gaearon commented Jan 9, 2018

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');
  1. 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');
  1. Use test renderer

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

@pugnascotia
Copy link
Contributor Author

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
Copy link
Member

SimenB commented Jan 9, 2018

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

Yes please!

pugnascotia added a commit to pugnascotia/jest that referenced this issue Jan 10, 2018
Closes jestjs#5258. Update the documentation to describe the warnings that are
emitted by React 16 when using Enzyme, mocked components and snapshot
testing.
pugnascotia added a commit to pugnascotia/jest that referenced this issue Jan 10, 2018
Closes jestjs#5258. Update the documentation to describe the warnings that are
emitted by React 16 when using Enzyme, mocked components and snapshot
testing.
pugnascotia added a commit to pugnascotia/jest that referenced this issue Jan 10, 2018
Closes jestjs#5258. Update the documentation to describe the warnings that are
emitted by React 16 when using Enzyme, mocked components and snapshot
testing.
@pugnascotia
Copy link
Contributor Author

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

thymikee pushed a commit that referenced this issue Jan 11, 2018
* Document caveat with mocks, Enzyme, snapshots and React 16.

Closes #5258. Update the documentation to describe the warnings that are
emitted by React 16 when using Enzyme, mocked components and snapshot
testing.

* Update CHANGELOG.md

* Describe further options to work around warnings
doronpr added a commit to doronpr/jest that referenced this issue May 15, 2018
In React 16. This is actually the only feasible way when doing a full mount using https://github.com/Root-App/react-native-mock-render
refs jestjs#5258
@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 13, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants