ViewModel testing in Android Kotlin - UI Render Trace

Component - ViewModel testing

This UI component shows a simple screen that uses a ViewModel to manage a counter value. The ViewModel holds the counter state and exposes functions to increase it. The UI observes the ViewModel state and updates the displayed number. Testing the ViewModel means checking that the counter logic works correctly without the UI.

Widget Tree

Activity
└── ComposeView
    └── Column
        ├── Text (shows counter)
        └── Button (increments counter)

The Activity hosts the ComposeView. The ComposeView displays a Column with a Text widget showing the current counter and a Button to increase it. The ViewModel holds the counter state and is used by the Activity.

Render Trace - 5 Steps

Step 1: Activity

Step 2: ViewModel

Step 3: ComposeView > Column

Step 4: Button

Step 5: Text

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

Counter value = 0

→

After

Counter value = 1

Re-renders:ComposeView subtree including Text displaying counter

UI Quiz - 3 Questions

What part of the UI updates when the counter changes?

A The Text widget showing the counter

B The Button widget

C The Activity background color

D The ViewModel instance

Key Insight

Separating UI from logic using a ViewModel lets you test the app's behavior easily without needing the UI. The UI just observes and displays the ViewModel state, so testing the ViewModel ensures your app logic is correct and reliable.