Snapshot testing -React(ive) to Proactive

Magic UI Testing

Snapshot testing has been around for a while in React.

What is it?

A way of testing the UI given a certain state. So your site renders each part of it in a certain way. To capture and test that consistency over time you can use snapshot tests.

Why would I use it?

UI and API testing has been a source of the most flaky tests. Unreliable and prone to breaking the quickest while being the most opaque. Snapshot testing allows us to put the UI under test while removing as much of the lower parts as possible

Where would I use it?

Well, this is the beauty of snapshot testing. You can use it for any UI and during UX Design phase all the way to the day you're deploying to production. Both should go into a source control system. And the right people can review and sign off on it.

What's the point of all this extra work?

Well, often we find out the cost of something is in the OpEx not the CapEx (so we can achieve Operational Excellence).

Why haven't we used this in all front-end environments?

Often the rendering of a particular UI was limited to rendering the entire UI. It is possible such as in Angular, however you had to avoid items that can mess with the state like two-way binding. Subtle changes over time add up. There is no documentation for these changes so why the color schema was chosen is unknown and it's difficult to change. Why the layout was chosen is also unclear.

What does source control do that versioned file systems don't (such as OneDrive)?

With some proper use of source control messages and reviews, we can now see who did what and why. Who signed off on it and why. This when done well also writes the release notes for us.

Why wouldn't I just track the changes in versioned cloud storage?

Well, changes in these systems typically don't tell me what happened. Also most IDE's mess with these files a lot.

APIs aren't UIs?

Yes. Let's deviate slightly. They are however the primary interaction for people calling your system through an interface. As such if you can capture the various calls you can build up a set of tests that are easy to maintain.
If there's an interface, you might be able to snapshot test based on this input I will get this output.

But End to End tests cover that

Not well, in the classic test pyramid they have the highest development work with the lowest return. Snapshot tests can be classed as a form of Unit tests. Which are more stable, more granular and far less reliant on a large amount of state.

Remember, someone has to maintain this code and a lack of tests is a bad sign.

Further Reading

Communication patterns

React Best Practices