Jest Snapshot

Taking snapshots using Jest

When you think of testing, you probably picture a list of assertions about your code, a sort of checklist of its functionality. Up to this point, all of the tests in this course have fit that description. But sometimes a picture is worth a thousand words. Or in this case, a piece of content generated by your code can be worth a thousand assertions. Seeing a diff of that content can bring your attention to problems you might never have thought to write an assertion for.

For our purposes, the content we’re interested in snapshotting is the DOM generated by CarouselSlide, along with the styles generated by styled-components.

• To do that, you’ll need to install one more package, enzyme-to-json.

  $ npm install --save-dev enzyme-to-json@3.3.5
  + enzyme-to-json@3.3.5
  

  enzyme-to-json takes the trees from Enzyme wrappers and converts them to the JSON format used for Jest snapshot testing, a process known as serialization.

• To tell Jest to use the package, declare it in the Jest config: