Jest Snapshot

Learn how you can take snapshots using Jest to compare and test your React Components

We'll cover the following

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:

Get hands-on with 1200+ tech skills courses.