Snapshot testing on iOS

Also known as visual regression testing.

It’s been a while we know it's possible to do snapshot testing on iOS. Recently, my friend Dariusz Rybicki introduced me to SnapshotTesting (from Stephen Celis and Brandon Williams ) and that’s what we’ll talk about today.

Photo by NordWood Themes on Unsplash

First things first

Let’s start by adding the following swift package:

https://github.com/pointfreeco/swift-snapshot-testing

Then, let’s create a simple screen and set view.backgroundColorto red:

In our unit test target, let’s create a test class, import SnapshotTesting and create a test case for this screen:

Right now, if we run the tests we’ll see an error saying that no reference was found on disk. This happens because before we assert that nothing changed we need to have something to compare to. But notice that the last line of the error message says that if we re-run the test it will compare to a newly-recorded snapshot.

It means that when we don’t specify whether we are recording or not and there’s no snapshot saved yet for that test case, the library automatically creates one snapshot for it. We could specify it inline with a recording boolean argument in each assertion or just isRecording = true anywhere here.

In the latter, the tests will fail with the following message:

What if it fails for real? Let’s check the reports

Everytime we run the tests we get new items on the report navigator which are the tests, the logs and code coverages. This time won’t be any different. To force our snapshot test to fail let’s just set view.backgroundColor = .blue, run the tests again and select the latest test at the report navigator.

We can see up here that when snapshot tests fail we have attachments. If we take a look at it, we’ll see three images:

• Red: This is the reference snapshot, what we are using to compare to — the exact same look it did when we recorded our snapshot for the first time.
• Blue: This is the current result of the app. In fact we did change the background from red to blue on purpose to fail the tests.
• Purple: Here every pixel that differs from the expected result is painted in purple. Since the entire current screen looks different from the expected screen, it got fully highlighted.