Skip to content

Instantly share code, notes, and snippets.

@chrisbolin
Last active May 31, 2018 17:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisbolin/09b6b1ed3255b18093ec5399380008aa to your computer and use it in GitHub Desktop.
Save chrisbolin/09b6b1ed3255b18093ec5399380008aa to your computer and use it in GitHub Desktop.
Snapshot Guidelines

The Rule: Keep Snapshot Tests Useful

Snapshots can be helpful, but if used improperly they can useless or even a burden.

Make Snapshots Targeted

Don't snapshot things you don't care about. Don't snapshot an entire wrapper component if you are only interested in a single subcomponent. You can use enzyme's find() (available on both shallow and full wrappers).

Make Snapshots of Shallow Components

Just like you shouldn't snapshot an entire wrapper if you are only interested in a single subcomponent, you shouldn't snapshot all of the subcomponents if you are only interested in the wrapper component. Use shallow() (as opposed to mount()) to exclude child component implementation details.

Note: for non-snapshot tests, the full DOM mount() is usually preferable.

Make Snapshots Small

A stored snapshot is only as good as our ability to review it when it changes. Therefore keeping snapshots short and readable is very important to allow for thorough reviews. As a guideline, try to keep your snapshots under 50 lines.

Remove and Replace Unhelpful Snapshots

If you are losing faith in the snapshot or are having trouble reading the diff, consider removing it. For example, if a snapshot test breaks and you are tempted to just update the snapshot (u in Jest) because you can't figure out what's going on, remove and replace it.

Likely you'll need to break up the snapshot test into a few more targeted assertions.

Recommended Reading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment