Skip to content

Commit 364e241

Browse files
authored
Add snapshot best practices to master docs (#6142)
1 parent 80c6c15 commit 364e241

1 file changed

Lines changed: 86 additions & 10 deletions

File tree

docs/SnapshotTesting.md

Lines changed: 86 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,43 @@ watch mode:
140140

141141
![](/jest/img/content/interactiveSnapshotDone.png)
142142

143-
### Tests Should Be Deterministic
144-
145-
Your tests should be deterministic. That is, running the same tests multiple
146-
times on a component that has not changed should produce the same results every
147-
time. You're responsible for making sure your generated snapshots do not include
143+
## Best Practices
144+
145+
Snapshots are a fantastic tool for identifying unexpected interface changes
146+
within your application – whether that interface is an API response, UI, logs,
147+
or error messages. As with any testing strategy, there are some best-practices
148+
you should be aware of, and guidelines you should follow, in order to use them
149+
effectively.
150+
151+
### 1. Treat snapshots as code
152+
153+
Commit snapshots and review them as part of your regular code review process.
154+
This means treating snapshots as you would any other type of test or code in
155+
your project.
156+
157+
Ensure that your snapshots are readable by keeping them focused, short, and by
158+
using tools that enforce these stylistic conventions.
159+
160+
As mentioned previously, Jest uses
161+
[`pretty-format`](https://yarnpkg.com/en/package/pretty-format) to make
162+
snapshots human-readable, but you may find it useful to introduce additional
163+
tools, like
164+
[`eslint-plugin-jest`](https://yarnpkg.com/en/package/eslint-plugin-jest) with
165+
its
166+
[`no-large-snapshots`](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)
167+
option, or [`snapshot-diff`](https://yarnpkg.com/en/package/snapshot-diff) with
168+
its component snapshot comparison feature, to promote committing short, focused
169+
assertions.
170+
171+
The goal is to make it easy to review snapshots in pull requests, and fight
172+
against the habit of simply regenerating snapshots when test suites fail instead
173+
of examining the root causes of their failure.
174+
175+
### 2. Tests should be deterministic
176+
177+
Your tests should be deterministic. Running the same tests multiple times on a
178+
component that has not changed should produce the same results every time.
179+
You're responsible for making sure your generated snapshots do not include
148180
platform specific or other non-deterministic data.
149181

150182
For example, if you have a
@@ -162,17 +194,61 @@ Now, every time the snapshot test case runs, `Date.now()` will return
162194
`1482363367071` consistently. This will result in the same snapshot being
163195
generated for this component regardless of when the test is run.
164196

165-
### Snapshots are not written automatically on Continuous Integration systems (CI)
197+
### 3. Use descriptive snapshot names
198+
199+
Always strive to use descriptive test and/or snapshot names for snapshots. The
200+
best names describe the expected snapshot content. This makes it easier for
201+
reviewers to verify the snapshots during review, and for anyone to know whether
202+
or not an outdated snapshot is the correct behavior before updating.
166203

167-
As of Jest 20, snapshots in Jest are not automatically written when Jest is run
168-
in a CI system without explicitly passing `--updateSnapshot`. It is expected
204+
For example, compare:
205+
206+
```js
207+
exports[`<UserName /> should handle some test case`] = `null`;
208+
209+
exports[`<UserName /> should handle some other test case`] = `
210+
<div>
211+
Alan Turing
212+
</div>
213+
`;
214+
```
215+
216+
To:
217+
218+
```js
219+
exports[`<UserName /> should render null`] = `null`;
220+
221+
exports[`<UserName /> should render Alan Turing`] = `
222+
<div>
223+
Alan Turing
224+
</div>
225+
`;
226+
```
227+
228+
Since the later describes exactly what's expected in the output, it's easy to
229+
see when it's wrong:
230+
231+
```js
232+
exports[`<UserName /> should render null`] = `
233+
<div>
234+
Alan Turing
235+
</div>
236+
`;
237+
238+
exports[`<UserName /> should render Alan Turing`] = `null`;
239+
```
240+
241+
## Frequently Asked Questions
242+
243+
### Are snapshots written automatically on Continuous Integration (CI) systems?
244+
245+
No, as of Jest 20, snapshots in Jest are not automatically written when Jest is
246+
run in a CI system without explicitly passing `--updateSnapshot`. It is expected
169247
that all snapshots are part of the code that is run on CI and since new
170248
snapshots automatically pass, they should not pass a test run on a CI system. It
171249
is recommended to always commit all snapshots and to keep them in version
172250
control.
173251

174-
## Frequently Asked Questions
175-
176252
### Should snapshot files be committed?
177253

178254
Yes, all snapshot files should be committed alongside the modules they are

0 commit comments

Comments
 (0)