An intro to Snapshot testing 📸 
Tags: swift, testing, showdev, xcode
Published: 2017-11-25 18:32:30

---
title: An intro to Snapshot testing 📸 
published: true
description: Learn how to make snapshot test for you iOS apps
tags: swift, testing, showdev, xcode
---

So, I’m in the way of making a new app and I would love to share all my learnings while I’m in the progress so I can keep my self-motivated and share some knowledge that hopefully, you can use for your owns apps.

### 🎨 Why to test the UI?
You want to make sure that every time you touch any of your UI elements everything stays as they way they were meant to be, also this kind of integration test help you achieve the pixel perfect views and make your designers happy by having design reference images that they can see even in your pull requests.

![](https://cdn-images-1.medium.com/max/1600/1*_Kt6ULxjNjf8wVv3l9dzrg.jpeg)
So you want to achieve pixel-perfect while making some nice tests?

### ⚡️ How does it work?
I'll try to describe how to use this method using my latest lib [Snap.swift](https://github.com/skyweb07/Snap.swift).

It works by generating a reference image that gets stored in your repository and then comparing each new test case with the `reference image` to check if there are any differences. If test found any differences it will add an attachment into your test case and you'll be able to check what changed

![Project attachment](https://github.com/skyweb07/Snap.swift/blob/develop/.art/xcode_attachment.png?raw=true)
 
### 🛠 Configuration

In order to configure the snapshot test folder, we need to add a new environment variable to the project with name `SNAP_REFERENCE_IMAGE_PATH` and value `$(SOURCE_ROOT)/$(PROJECT_NAME)Tests/` so `Snap.swift` can find the folder to store the reference images. If the configuration was correctly set the project should look like this:

![Project attachment](https://github.com/skyweb07/Snap.swift/blob/develop/.art/xcode_project_environment_variable.png?raw=true)

### 🎯 Installation

Snap.swift is available through [CocoaPods](http://cocoapods.org). To install
it, simply add the following line to your Podfile:

```ruby
pod 'Snap.swift'
```

### ✅ Creating our first test 

1) We first need to record our reference images, in order to do so we have to first go into our test class and set the `isRecording` variable to be `true` so the library knows that we are in record mode and can extract the `reference images`


```swift
import XCTest
import Snap_swift

class SnapTests: XCTestCase {
  
  override func setUp() {
    super.setUp()
    isRecording = true
  }

  func test_box_with_text_aligned_to_center() {
    let view = BoxWithTextAlignedToCenterView()
    
    expect(view).toMatchSnapshot()
  }
}
```

After executing out test suite if everything was ok we should see that all of our tests failed with a warning similar to

```bash
⚠️ Test ran in record mode, reference image has been saved to $SNAP_REFERENCE_IMAGE_PATH/testcase.png, now remove `isRecording` in order to perform the snapshot comparison.

```

This is ok, it just means that our reference images were saved, we can inspect them in our `reference image` directory, we should normally add these into `git`  so we can compare against them. 

#### ⚠️ Warning
> *Remember to remove the `isRecording` flag after generating your reference images or you won't be able to do the image comparison*


### 📝 Notes

> As today, you can make assertions on `UIView` and `CALayer` classes.

The project is highly inspired on `Facebook` [FBSnapshotTestCase](https://github.com/facebookarchive/ios-snapshot-test-case/) library, it seems that they had archived the library so I started this one to continue envolving the project and continue with mobile `snapshot-testing` 

There are other ways to test UI elements by using libs like KIF or EarlGrey by Google but I think this kind of snapshot test are more easy to maintain and one of the Snap.tests could be equal to many of the other frameworks.
If you have any doubts or questions you can reach me via [Twitter](https://twitter.com/skyweb07) and I’ll try to help you out.  

Thanks you all and happy Snapshot testing 📸