Snapshot Testing in Swift
It has been over three months in my new job at Hepsiburada, and I am here to share my learnings so far. One of the things that I learn throughout this journey is Snapshot Testing. Today, we will discuss what is it and we will have a demo application to cover it in basics.
What is Snapshot Testing?
Generally, when we develop something new, we are likely to have distortion in our older components or screens. We fix something, at the same time we break another thing. Snapshot Testing is a type of test that you may write to prevent such undesired UI changes. It builds your project and takes a screenshot of your screen or the component — depends on how you preferred to develop it. Then, the screenshot becomes the reference for your tests. Afterwards, when you build the project, run the tests, and if the rendered component’s snapshot doesn’t match with the reference snapshot, the test fails.
What if you changed the component on purpose? Then, you need to delete the reference snapshot. Run the tests and have the new snapshots as your reference.
swift-snapshot-testing library
Let’s create a demo application in order to understand Snapshot Testing clearly. In this demo application, we will use a third-party library for swift snapshot testing by Pointfree.
Coding
1- Create XCode project for programmatically UI development
First, create an Xcode project, remove the storyboard and make the project suitable for programmatically UI development. If you need a resource to do that, i would recommend this video.
2- Setup User Interface
Then, create a basic user interface in your View Controller class. For this purpose, I created a function which makes the background color orange, and adds a label on the screen with a text of “Hello World”.
3- Create Test Target
Next, we need to create a test target. In order to do that, select your Xcode project in the File Inspector, then add target with Unit Testing Bundle.
I named it as “SnapshotTestingDemoTests”.
4- Add swift-snapshot-testing library
Add the snapshot testing library to your test target like in the screenshot below. To achieve that, select your test target. Then, under the Build Phases tab, open Link Binary With Libraries dropdown and “Add Package Dependency”.
Select the library that we would like to use which is swift-snapshot-testing.
Select Add Package and then you need to select the target. Make sure you select the test target of your project which is SnapshotTestingDemoTests in my case and select Add Package again.
5- Write tests
Now, it’s time to write some tests ✍🏻. Let’s write your first snapshot test like the code snippet below.
Make sure you have testable import of your project in order to access your components.
In the code snippet above, assertSnapshot function helps us to assert that a given value matches a reference on disk. If there is a matching snapshot with the name attributes, it compares the snapshot with that reference. If there is no matching snapshot with that name, it creates a new snapshot.
You are able to create test functions in this XCTestCase class. For this purpose, I created a basic test function that creates a snapshot of the View Controller class. Since we are testing the UI components, I selected the snapshot file type as image, and named the tests.
We may add different case tests of our screen like very long text case for a label or a button. They might be really helpful for the test coverage.
6- Run the tests 🏃.
To run the test, make sure you select Test option and your test target (SnapshotTestingDemoTests in my case). In the above GIF, I show you how to select Test.
When you first run a newly created test, it fails. The reason is that there is no reference snapshots for that test. Re-run the test and it will result as successfully.
7- Move Snapshots folder to Xcode
You are able to see your snapshots when you click the test folder and select Show in Finder. Snapshots folder is in that directory. To easily access, you may move the Snapshots folder to your project on Xcode.
Our snapshot looks like this image:
8- Change UI to see failed test message
Now, let’s change the user interface of our application a little bit in order to see that our test works correctly, and it shows a failed message.
For this purpose, I update the background color statement as “view.backgroundColor = .systemPink” and the screen’s background becomes pink.
Now, it shows that the test failed like the image below.
Also, when you check the error, there is an information about this failure and it shows that the snapshot is not matching with the reference.
These two links open the images in Finder and you are able to see the current snapshot and the reference one in order to compare.
Yes, we created our first test and it runs successfully. (To fix the error, revert the background color to orange again — which is like the reference)
Last but not least, here are some notes about snapshot testing. 📕
- We created the snapshots as image in this tutorial, however we might also have as JSON, property list, string, or so on.
- We are able to snapshot test a URL or an object. If a data can be represented as an image, text, or data, we may write a snapshot test for it.
- We are also able to get snapshots in the device that we would like to test them on. For example, if you would like to test a component in specifically three devices, you may add tests for each one of them.
e.g: assertSnapshot(matching: vc, as: .image(on: .iPhoneX)) - If you have a stackview, label, or button, having tests with different length of texts might be useful for you. You may consider writing tests for similar situations and check the hugging priorities of these components as well.
In this article, we discussed what is Snapshot Testing and covered how to have snapshot testing in Swift. You may reach the source code in this repository. If you liked this content and would like to be notified in the future articles, please subscribe on my newsletter. If you would like to give feedback about this article, you may reach me via hi@iremkaraoglu.com. Thank you for reading, I hope you liked it. Until next time, take care!
