Skip to content

Commit 2d07714

Browse files
pugnascotiathymikee
authored andcommitted
Document caveat with mocks, Enzyme, snapshots and React 16 (#5275)
* 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
1 parent d9f9aab commit 2d07714

File tree

4 files changed

+45
-2
lines changed

4 files changed

+45
-2
lines changed

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
* `[jest-jasmine2]` Fix memory leak in snapshot reporting ([#5279](https://github.com/facebook/jest/pull/5279))
77
* `[jest-config]` Fix breaking change in `--testPathPattern` ([#5269](https://github.com/facebook/jest/pull/5269))
88

9+
### Fixes
10+
11+
* `[docs]` Document caveat with mocks, Enzyme, snapshots and React 16
12+
([#5258](https://github.com/facebook/jest/issues/5258))
13+
914
## jest 22.0.5
1015

1116
### Fixes

CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ accurately.
9595
```sh
9696
cd website # Only needed if you are not already in the website directory
9797
yarn
98-
yarn test
98+
yarn start
9999
```
100100
2. You can run a development server to check if the changes you made are being
101101
displayed accurately by running `yarn start` in the website directory.

docs/TutorialReact.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,43 @@ with `jest -u` to overwrite the existing snapshot.
184184
The code for this example is available at
185185
[examples/snapshot](https://github.com/facebook/jest/tree/master/examples/snapshot).
186186

187+
#### Snapshot Testing with Mocks, Enzyme and React 16
188+
189+
There's a caveat around snapshot testing when using Enzyme and React 16+.
190+
If you mock out a module using the following style:
191+
192+
```js
193+
jest.mock('../SomeDirectory/SomeComponent', () => 'SomeComponent');
194+
```
195+
196+
Then you will see warnings in the console:
197+
198+
```
199+
Warning: <SomeComponent /> is using uppercase HTML. Always use lowercase HTML tags in React.
200+
201+
# Or:
202+
Warning: The tag <SomeComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
203+
```
204+
205+
React 16 triggers these warnings due to how it checks element types, and
206+
the mocked module fails these checks. Your options are:
207+
208+
1. Render as text. This way you won't see the props passed to the mock
209+
component in the snapshot, but it's straightforward:
210+
```js
211+
jest.mock('./SomeComponent', () => () => 'SomeComponent');
212+
```
213+
2. Render as a custom element. DOM "custom elements" aren't checked for
214+
anything and shouldn't fire warnings. They are lowercase and have a
215+
dash in the name.
216+
```js
217+
jest.mock('./Widget', () => 'mock-widget');
218+
```
219+
3. Use `react-test-renderer`. The test renderer doesn't care about
220+
element types and will happily accept e.g. `SomeComponent`. You could
221+
check snapshots using the test renderer, and check component
222+
behaviour separately using Enzyme.
223+
187224
### DOM Testing
188225
189226
If you'd like to assert, and manipulate your rendered components you can use

docs/TutorialReactNative.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,8 @@ jest.mock('react-native-video', () => 'Video');
211211
```
212212

213213
This will render the component as `<Video {...props} />` with all of its props
214-
in the snapshot output.
214+
in the snapshot output. See also [caveats around Enzyme and React
215+
16](tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16).
215216

216217
Sometimes you need to provide a more complex manual mock. For example if you'd
217218
like to forward the prop types or static fields of a native component to a mock,

0 commit comments

Comments
 (0)