Skip to content

Commit

Permalink
Document caveat with mocks, Enzyme, snapshots and React 16.
Browse files Browse the repository at this point in the history
Closes jestjs#5258. Update the documentation to describe the warnings that are
emitted by React 16 when using Enzyme, mocked components and snapshot
testing.
  • Loading branch information
pugnascotia committed Jan 10, 2018
1 parent 3ffc99e commit 9edd903
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 2 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ accurately.
```sh
cd website # Only needed if you are not already in the website directory
yarn
yarn test
yarn start
```
2. You can run a development server to check if the changes you made are being
displayed accurately by running `yarn start` in the website directory.
Expand Down
25 changes: 25 additions & 0 deletions docs/TutorialReact.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,31 @@ with `jest -u` to overwrite the existing snapshot.
The code for this example is available at
[examples/snapshot](https://github.com/facebook/jest/tree/master/examples/snapshot).

#### Snapshot Testing with Mocks, Enzyme and React 16

There's a caveat around snapshot testing when using Enzyme and React 16+.
If you mock out a module using the following style:

```js
jest.mock('../SomeDirectory/SomeComponent', () => 'SomeComponent');
```

Then you will see warnings in the console:

```
Warning: <SomeComponent /> is using uppercase HTML. Always use lowercase HTML tags in React.
# Or:
Warning: The tag <SomeComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
```

React 16 triggers these warnings due to how it checks element types, and
the mocked module failing these checks. This doesn't happen if you're using
`react-test-renderer` for your snapshot tests, because the test renderer
doesn't care about the element types and will happily accept e.g.
`SomeComponent`. As a rule of thumb, if you want to mock components in your
snapshots, use `react-test-renderer`.

### DOM Testing

If you'd like to assert, and manipulate your rendered components you can use
Expand Down
3 changes: 2 additions & 1 deletion docs/TutorialReactNative.md
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,8 @@ jest.mock('react-native-video', () => 'Video');
```

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

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

0 comments on commit 9edd903

Please sign in to comment.