Snapshot testing in iOS Swift - Mini App: Build & Ship

Build: Profile Screen

Build a simple profile screen that shows a user avatar, name, and a short bio. This screen will be used for snapshot testing to verify UI consistency.

Target UI

-------------------------
|       Profile         |
|-----------------------|
|  [Avatar Image]       |
|                       |
|  Name: John Appleseed |
|  Bio: iOS Developer   |
|                       |
|-----------------------|

Display a circular avatar image at the top center

Show the user's name below the avatar in bold

Show a short bio below the name in regular font

Use UIKit and Swift for implementation

Prepare the view for snapshot testing with fixed sizes

Starter Code

iOS Swift

import UIKit

class ProfileViewController: UIViewController {
    private let avatarImageView = UIImageView()
    private let nameLabel = UILabel()
    private let bioLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupViews()
    }

    private func setupViews() {
        // TODO: Add avatarImageView setup
        // TODO: Add nameLabel setup
        // TODO: Add bioLabel setup
        // TODO: Add layout constraints
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class ProfileViewController: UIViewController {
    private let avatarImageView = UIImageView()
    private let nameLabel = UILabel()
    private let bioLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupViews()
    }

    private func setupViews() {
        avatarImageView.translatesAutoresizingMaskIntoConstraints = false
        avatarImageView.image = UIImage(systemName: "person.circle.fill")
        avatarImageView.tintColor = .systemBlue
        avatarImageView.contentMode = .scaleAspectFill
        avatarImageView.clipsToBounds = true
        avatarImageView.layer.cornerRadius = 50

        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.text = "John Appleseed"
        nameLabel.font = UIFont.boldSystemFont(ofSize: 24)
        nameLabel.textAlignment = .center

        bioLabel.translatesAutoresizingMaskIntoConstraints = false
        bioLabel.text = "iOS Developer"
        bioLabel.font = UIFont.systemFont(ofSize: 16)
        bioLabel.textAlignment = .center
        bioLabel.textColor = .darkGray

        view.addSubview(avatarImageView)
        view.addSubview(nameLabel)
        view.addSubview(bioLabel)

        NSLayoutConstraint.activate([
            avatarImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            avatarImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            avatarImageView.widthAnchor.constraint(equalToConstant: 100),
            avatarImageView.heightAnchor.constraint(equalToConstant: 100),

            nameLabel.topAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: 20),
            nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
            bioLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            bioLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

This solution creates a simple profile screen using UIKit. The avatarImageView uses a system image and is made circular by setting layer.cornerRadius to half its width and enabling clipsToBounds. The nameLabel is bold and centered, and the bioLabel is regular font with a dark gray color. All views use Auto Layout constraints to position them vertically centered horizontally with spacing. This setup is perfect for snapshot testing because the layout is fixed and consistent.

Final Result

Completed Screen

-------------------------
|       Profile         |
|-----------------------|
|   (person.circle.fill) |
|                       |
|  John Appleseed       |
|  iOS Developer        |
|                       |
|-----------------------|

No interactive elements on this screen

Screen is static for snapshot testing

Stretch Goal

Add a dark mode appearance to the profile screen

💡 Hint

Use traitCollectionDidChange to update colors or use system colors that adapt automatically

Practice

1. What is the main purpose of snapshot testing in iOS development?

easy

A. To save a picture of the UI and detect visual changes automatically

B. To test the app's network requests

C. To check the app's memory usage

D. To verify the app's database schema

Solution

1. Step 1: Understand snapshot testing concept

   Snapshot testing captures the UI appearance as an image to compare later.

2. Step 2: Identify the main goal

   The goal is to detect unintended visual changes early by comparing snapshots.

3. Final Answer:

   To save a picture of the UI and detect visual changes automatically -> Option A

4. Quick Check:

   Snapshot testing = UI visual comparison [OK]

Hint: Snapshot testing checks UI images for changes [OK]

Common Mistakes:

• Confusing snapshot testing with network or performance tests
• Thinking it tests app logic instead of UI appearance

2. Which of the following is the correct syntax to assert a snapshot of a SwiftUI view named MyView() using the SnapshotTesting library?

easy

A. assertSnapshot(view: MyView(), as: .text)

B. assertSnapshot(view: MyView(), type: .image)

C. assertSnapshot(MyView(), format: .image)

D. assertSnapshot(matching: MyView(), as: .image)

Solution

1. Step 1: Recall correct function signature

   The SnapshotTesting library uses assertSnapshot(matching:as:) to compare views.

2. Step 2: Match parameters

   Correct usage is assertSnapshot(matching: MyView(), as: .image) to capture image snapshot.

3. Final Answer:

   assertSnapshot(matching: MyView(), as: .image) -> Option D

4. Quick Check:

   assertSnapshot(matching: view, as: .image) [OK]

Hint: Use assertSnapshot(matching: view, as: .image) [OK]

Common Mistakes:

• Using wrong parameter labels like view: or format:
• Using .text instead of .image for UI snapshots

3. Given this SwiftUI snapshot test code snippet:

let view = Text("Hello")
assertSnapshot(matching: view, as: .image)

What will happen if the UI of Text("Hello") changes color from black to red but the snapshot is not updated?

medium

A. The test will fail because the new UI image differs from the saved snapshot

B. The test will pass because text content is the same

C. The test will crash due to color mismatch

D. The test will ignore color changes and pass

Solution

1. Step 1: Understand snapshot comparison

   Snapshot testing compares saved UI images pixel by pixel.

2. Step 2: Effect of UI color change

   Changing text color changes the image, so it no longer matches saved snapshot.

3. Final Answer:

   The test will fail because the new UI image differs from the saved snapshot -> Option A

4. Quick Check:

   UI image change = test failure [OK]

Hint: Any UI visual change causes snapshot test failure [OK]

Common Mistakes:

• Assuming content text match is enough to pass
• Thinking snapshot tests ignore color or style changes

4. You wrote this snapshot test:

assertSnapshot(matching: MyView(), as: .image)

But the test always fails with an error saying the snapshot file is missing. What is the most likely cause?

medium

A. The view MyView() is not a valid SwiftUI view

B. You forgot to record the initial snapshot before running tests

C. The assertSnapshot function is deprecated

D. The test target does not import XCTest

Solution

1. Step 1: Understand snapshot test workflow

   Snapshot tests require recording a snapshot image first to compare against.

2. Step 2: Identify missing snapshot cause

   If snapshot file is missing, it means initial snapshot was not recorded with record=true.

3. Final Answer:

   You forgot to record the initial snapshot before running tests -> Option B

4. Quick Check:

   Missing snapshot file = forgot record step [OK]

Hint: Record snapshot once before testing to avoid missing file errors [OK]

Common Mistakes:

• Assuming test fails due to view code errors
• Not knowing you must record snapshots first

5. You want to test your SwiftUI view ProfileView() on both iPhone 14 and iPad Pro screen sizes using snapshot testing. Which approach correctly tests both devices in one test function?

hard

A. Use assertSnapshot once without specifying device traits

B. Write separate test functions for each device without looping

C. Use a loop over devices and call assertSnapshot with different traits for each device

D. Test only on iPhone 14 because iPad Pro is not supported

Solution

1. Step 1: Understand device traits in snapshot testing

   You can specify device traits like size and scale to simulate different devices.

2. Step 2: Use loop to test multiple devices

   Looping over device traits and calling assertSnapshot for each covers multiple devices in one test.

3. Final Answer:

   Use a loop over devices and call assertSnapshot with different traits for each device -> Option C

4. Quick Check:

   Loop + traits = multi-device snapshot test [OK]

Hint: Loop devices with traits to test multiple screens [OK]

Common Mistakes:

• Testing only one device and missing others
• Not using traits to simulate device sizes
• Writing many separate test functions unnecessarily