@@ -186,8 +186,8 @@ The code for this example is available at
186186
187187#### Snapshot Testing with Mocks, Enzyme and React 16
188188
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:
189+ There's a caveat around snapshot testing when using Enzyme and React 16+. If you
190+ mock out a module using the following style:
191191
192192``` js
193193jest .mock (' ../SomeDirectory/SomeComponent' , () => ' SomeComponent' );
@@ -202,24 +202,22 @@ Warning: <SomeComponent /> is using uppercase HTML. Always use lowercase HTML ta
202202Warning: The tag <SomeComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
203203```
204204
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.
205+ React 16 triggers these warnings due to how it checks element types, and the
206+ 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 component
209+ 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 anything
214+ and shouldn't fire warnings. They are lowercase and have a dash in the name.
215+ ``` js
216+ jest .mock (' ./Widget' , () => ' mock-widget' );
217+ ```
218+ 3 . Use ` react-test-renderer ` . The test renderer doesn't care about element types
219+ and will happily accept e.g. ` SomeComponent ` . You could check snapshots using
220+ the test renderer, and check component behaviour separately using Enzyme.
223221
224222### DOM Testing
225223
0 commit comments