Rethinking in Snapshots

Recap

So far, you’ve seen how you can test Vue.js components’ structure, styles, methods, computed properties, events, watchers, and more. And you’ve learned to do that using different techniques and methods.

But, what if we tell you that you can test most of it using snapshot testing alone?

You’ve already seen snapshots being used in chapters 1 and 2 but those chapters were more focused on explaining shallow and deep rendering, so we haven’t explained them in detail yet.

Snapshot Testing in Details

Snapshot testing is the technique of asserting by comparing two different outputs.

Think of it as something similar to what the screenshot technique used in end-to-end tests to check for regressions: the first test run takes a screenshot of a part of the screen (for instance: a button), and from that moment on, all the following runs of the same test will compare a new screenshot with the original one. If they’re the same, the test passes, otherwise, there is a regression.

Snapshot testing works in the same way but instead of comparing images, it compares serializable output such as json, html or just strings.

Since Vue.js renders html, you can use snapshot testing to assert the rendered html given different states of a component.

Rethinking in Snapshots

For this example, let’s consider the following ContactBox.vue component: