I am test-driven to a fault. So when I heard about "snapshot testing," I had a visceral, negative reaction.

But I don't want to be biased against something I haven't tried so I tried it. To my surprise, it turned out to be ideal for testing React rendering. Component rendering is tedious to test-drive rigorously. Snapshot testing encourages a rapid, iterative, and fun workflow for React rendering development.

Use Readable, Isolated Snapshots

It is important to have human-readable snapshots so I suggest something like enzyme-to-json to convert Enzyme wrappers to beautiful descriptions. They look like this:

exports[`unconnected renders 1`] = `
<div
  className="directory">
  <ArticleMenu
    entries={
      Array [
        Object {
          "id": "one",
          "title": "One",
        },
      ]
    } />
</div>
`;

Notice that ArticleMenu is rendered but none of its content is. It is important in snapshot testing to use shallow rendering. That way, changes in components you include in yours don't cause your tests to fail.

And It IS TDD

The most surprising result for me was discovering that snapshot testing really drives design. Once I was used to the new rapid pace of rendering development, I found that my component modulization was getting in the way. I developed a new approach to modularizing my components and making sense of the unconnected and connected Redux bits.

So while it isn't test first, it does drive the final solution, making it test driven just as much test-firsting a complex object graph on the server side.

Give It a Try

Take a look at the Github repo and take a look at the components directory for some examples. I hope you give it a try.