iOS snapshot testing
Tags: agilewebandappde, iosdeveloper, mobileapp, uitesting
Published: 2018-07-17 08:09:00

---
title: iOS snapshot testing
published: true
tags: Agile web and app de,iOS Developer,mobile app,UI testing
canonical_url: https://apiumhub.com/tech-blog-barcelona/ios-snapshot-testing/
---

Writing user interface tests is always a bit complicated, and many developers end up leaving _views_ without testing or dedicating a lot of time and effort to the development of tests. Apple has its own native support for UI testing but does not support _view-based testing_. This lack of functionality makes many people skip the part of writing tests. Therefore, in [Apiumhub](/) we decided to write an article about iOS snapshot testing. 

 

## iOS snapshot testing

 

### View-based testing

_View-based testing_ means verifying that what the user sees is exactly what we ( as developers ) want them to see. Thanks to this testing we can guarantee that in different states or versions, our views are shown as expected.

 

### Snapshot Test. How does it work?

The snapshot test takes a capture of a _UIView_ or _CALayer_ and uses the _renderInContext_ _method_ which makes a capture of the view and compares it with the reference image stored in our repository. The test fails if both images do not match and deliver a third capture showing the differences.

 

### Configuration

The library was created by Facebook (FBSnapshotTestCase) and has now been renamed to _iOSSnapshotTestCase_ and is maintained by uber.

The first step, as they explain on their [Github page](https://github.com/uber/ios-snapshot-test-case), is to add the library to our Podfile.

Then we edit the scheme of our target to add the directory where our reference captures will be saved. To do this we add an environment variable with the key _FB\_REFERENCE\_IMAGE\_DIR._

[![spanshot testing](https://apiumhub.com/wp-content/uploads/2018/07/Picture1-3.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture1-3.png)

 

Optionally we can also add the key _IMAGE\_DIFF\_DIR_ to indicate the directory where the differential captures that will be generated, will be saved in case our tests fail.

 

### Implementation

To see the implementation we will test a simple _viewcontroller_ that will change the visual aspect depending on a state.

[![ios testing implementation](https://apiumhub.com/wp-content/uploads/2018/07/Picture2.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture2.png)

 

The view of the two states:

[![snapshot testing configuration](https://apiumhub.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-15-at-16.53.50.png)](https://apiumhub.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-15-at-16.53.50.png)

We configure our test class by making it a subclass of _FBSnapshotTestCase_ instead of _XCTestCase_.

We define our tests by instantiating the ViewController, assigning the status and calling the _FBSnapshotVerifyView_ method.

[![viewController ios](https://apiumhub.com/wp-content/uploads/2018/07/Picture3.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture3.png)

First of all, we must execute the tests with the _recordMode_ activated to save the reference images. For this we introduce inside the method of setUp () recordMode = true.

[![recordmode ios](https://apiumhub.com/wp-content/uploads/2018/07/Picture4.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture4.png)

When executing the tests with recordMode activated, Fail will exit. It is normal because you do not have another image yet with which to make the comparison.

[![recordmode ios test](https://apiumhub.com/wp-content/uploads/2018/07/Picture5.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture5.png)

Then we comment or eliminate the line of _recordMode_ to launch the tests again and see what happens.

From now on, if the visual aspect of the view changes in the wrong way, our tests will notify us about this issue.

For example, if we inadvertently change the dimension of the icons, the test will generate a differential image with the changes.

[![icon mobile app ios](https://apiumhub.com/wp-content/uploads/2018/07/Picture6.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture6.png)

I have increased the size of the icon for the 20px test, and the change can be seen in the image.

 

### Run views in an isolated way

Thanks to the snapshot testing and to having the uncoupled views, we can instantiate and execute a certain ViewController in the simulator. It is very useful for accelerating the process of views creation and thus reducing development time.

In our _didFinishLaunchingWithOptions_ we check if we are running tests and in that case, we assign the flat and empty _UIViewController_ to the _rootViewController_.

[![doing ios testing mobile app](https://apiumhub.com/wp-content/uploads/2018/07/Picture7.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture7.png)

In our test class, we use an _XCTWaiter_ with a high timeout and assign the controller to the _rootViewController_ to execute.

[![rootViewController](https://apiumhub.com/wp-content/uploads/2018/07/Picture8.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture8.png)

Finally, in the test we call the _debugViewController_ method.

[![](https://apiumhub.com/wp-content/uploads/2018/07/Picture9.png)](https://apiumhub.com/wp-content/uploads/2018/07/Picture9.png)

In this way, we can execute the typical view that is within a long flow of screens of our app in a simple way.

If you are interested in receiving more tips for iOS snapshot testing or movile development in general, I highly recommend you to subscribe to our monthly newsletter [here](http://eepurl.com/cC96MY). 

 

## If you found this article about iOS snapshot testing interesting, you might like…

 

[iOS Objective-C app: sucessful case study](https://dev.to/apium_hub/protected-ios-objective-c-app-cornerjob-successfull-case-study-89e)

[Mobile app development trends of the year](https://dev.to/apium_hub/mobile-app-development-trends-of-the-year)

[Banco Falabella wearable case study ](https://apiumhub.com/tech-blog-barcelona/banco-falabella-wearable-ios-android/)

[Mobile development projects](https://apiumhub.com/software-projects-barcelona/) 

[Viper architecture advantages for iOS apps](https://apiumhub.com/tech-blog-barcelona/viper-architecture/) 

[Why Kotlin ? ](https://dev.to/apium_hub/why-kotlin-language-android-why-did-google-choose-kotlin--639)

[Software architecture meetups](https://dev.to/apium_hub/apiumhub-software-architecture-meetups-in-barcelona-31df)

[Pure MVP in Android](https://dev.to/apium_hub/pure-model-view-presenter-in-android-1736) 

[Java vs Kotlin: comparisons and examples](https://dev.to/apium_hub/java-vs-kotlin-5a33) 

 

The post [iOS snapshot testing](https://apiumhub.com/tech-blog-barcelona/ios-snapshot-testing/) appeared first on [Apiumhub](https://apiumhub.com).