Unit testing ViewModels in iOS Swift - UI Render Trace

Component - Unit testing ViewModels

This UI component shows a simple ViewModel with a counter and a button to increment it. Unit testing ensures the ViewModel logic works correctly without UI interaction.

Widget Tree

ViewModelTestView
├── Text (shows counter value)
└── Button (increments counter)

The root component is a ViewModelTestView containing two children: a Text widget that displays the current counter value, and a Button that increments the counter when tapped.

Render Trace - 3 Steps

Step 1: ViewModelTestView

Step 2: Text

Step 3: Button

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

counter = 0

→

After

counter = 1

Re-renders:Text widget displaying the counter value

UI Quiz - 3 Questions

What happens to the Text widget when the 'Increment' button is tapped?

A It changes color but keeps the same text

B It updates to show the new counter value

C It disappears from the screen

D It resets the counter to zero

Key Insight

Unit testing ViewModels helps catch logic errors early by isolating the data and behavior from the UI. This makes your app more reliable and easier to maintain.

Practice

1. What is the main purpose of unit testing a ViewModel in iOS development?

easy

A. To verify the app's business logic without involving the user interface

B. To test the app's user interface elements visually

C. To check the app's network connectivity

D. To measure the app's performance speed

Solution

1. Step 1: Understand the role of ViewModel

   The ViewModel handles app logic and data preparation, separate from UI.

2. Step 2: Identify unit testing focus

   Unit testing targets logic correctness without UI involvement.

3. Final Answer:

   To verify the app's business logic without involving the user interface -> Option A

4. Quick Check:

   Unit testing ViewModel = test logic only [OK]

Hint: Unit tests check logic, not UI or performance [OK]

Common Mistakes:

• Confusing unit tests with UI tests
• Thinking unit tests check network or performance
• Assuming ViewModel tests require UI elements

2. Which XCTest method is used to prepare the environment before each test runs in a ViewModel test class?

easy

A. setUp()

B. runTest()

C. testExample()

D. tearDown()

Solution

1. Step 1: Recall XCTest lifecycle methods

   setUp() runs before each test to prepare needed objects.

2. Step 2: Differentiate from tearDown()

   tearDown() cleans up after each test, not before.

3. Final Answer:

   setUp() -> Option A

4. Quick Check:

   Prepare tests before running = setUp() [OK]

Hint: setUp() runs before each test to prepare environment [OK]

Common Mistakes:

• Using tearDown() to prepare tests instead of clean up
• Confusing testExample() as a setup method
• Assuming runTest() is a XCTest lifecycle method

3. Given this ViewModel test code snippet, what will be the value of result after the test runs?

class CounterViewModel {
  var count = 0
  func increment() { count += 1 }
}

func testIncrement() {
  let vm = CounterViewModel()
  vm.increment()
  let result = vm.count
}

medium

A. Compilation error

B. 0

C. nil

D. 1

Solution

1. Step 1: Analyze initial state

   CounterViewModel starts with count = 0.

2. Step 2: Apply increment method

   increment() adds 1 to count, so count becomes 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   Increment once = count 1 [OK]

Hint: Increment adds 1, so count becomes 1 [OK]

Common Mistakes:

• Assuming count stays 0 without increment
• Thinking result is nil because of missing return
• Expecting compilation error due to missing test annotation

4. Identify the error in this ViewModel unit test code:

class MyViewModel {
  var value = 0
  func updateValue() { value = 10 }
}

func testUpdateValue() {
  let vm = MyViewModel()
  vm.updateValue()
  XCTAssertEqual(vm.value, 0)
}

medium

A. updateValue() method is missing return type

B. XCTAssertEqual expects 10 but checks for 0

C. MyViewModel class is not marked as final

D. vm instance is not initialized properly

Solution

1. Step 1: Check updateValue() effect

   updateValue() sets value to 10, so vm.value should be 10.

2. Step 2: Compare XCTAssertEqual parameters

   Test expects vm.value to be 0, which is incorrect after updateValue().

3. Final Answer:

   XCTAssertEqual expects 10 but checks for 0 -> Option B

4. Quick Check:

   Test expected value must match updated value [OK]

Hint: Check expected vs actual values in XCTAssertEqual [OK]

Common Mistakes:

• Ignoring the expected value in XCTAssertEqual
• Thinking missing return type causes error here
• Assuming class must be final for testing

5. You want to test a ViewModel method that fetches user data asynchronously and updates a userName property. Which approach correctly tests this behavior using XCTest?

hard

A. Call the method, then immediately assert userName without waiting

B. Test only synchronous methods; skip async ones

C. Use XCTestExpectation to wait for the async update before asserting userName

D. Mock the ViewModel and do not call the real method

Solution

1. Step 1: Understand async testing need

   Async methods update properties after delay, so test must wait.

2. Step 2: Use XCTestExpectation

   Expectation waits for async completion before asserting userName value.

3. Final Answer:

   Use XCTestExpectation to wait for the async update before asserting userName -> Option C

4. Quick Check:

   Async test = use XCTestExpectation [OK]

Hint: Wait for async calls with XCTestExpectation before assertions [OK]

Common Mistakes:

• Asserting async results immediately without waiting
• Skipping async tests thinking they are too complex
• Mocking ViewModel without testing real async behavior