Composables

Compose UI Testing Patterns

Community

chrisbanes

Use when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.

Overview

Repository
chrisbanes/skills
Publisher
chrisbanes
Stars
1.2K
Forks
58
Bundled files
1
License
Apache-2.0
Updated
Nov 14, 2026

Installation

tmp=$(mktemp -d)
git clone --depth 1 https://github.com/chrisbanes/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/compose-ui-testing-patterns" ~/.claude/skills/compose-ui-testing-patterns
rm -rf "$tmp"

Instructions

Compose: UI testing patterns

Core principle

Test the smallest UI contract that proves the behavior. Prefer plain state-driven UI tests with callbacks. Add integration only when lifecycle, navigation, DI, or platform behavior is the thing under test.

Procedure

  1. State the behavior and test concern the task asks you to prove.
  2. Inspect the existing test against that concern and choose the smallest sufficient seam from the table below.
  3. Keep focused edits within the requested test concern. Do not move test-only helpers into production or broaden production APIs unless that production boundary is itself under test.
  4. Drive controlled state or input, synchronize through Compose when needed, and assert an observable semantic, visual, or callback result.
  5. Finish with no edit when the existing test already uses the narrowest valid seam and proves the requested behavior.

Test target choice

What you need to prove Test shape
Text, button, loading/error branch, conditional content Plain UI Compose test
Callback wiring from click/input Plain UI Compose test
Focus navigation or keyboard behavior Compose test with key input
Visual layout, clipping, elevation, typography, image composition Screenshot test
State holder updates UI correctly State holder/unit test plus one wiring smoke test
Hover, pressed, focused, dragged interaction state Plain UI test with MutableInteractionSource
Navigation, lifecycle, DI integration Integration test

Prefer plain UI tests

If the screen has a state holder/UI split, test the plain UI composable:

composeTestRule.setContent {
    ProfileScreen(
        state = ProfileUiState(name = "Ada", canSave = true),
        onNameChange = {},
        onSaveClick = { saved = true },
        onBackClick = {},
    )
}

composeTestRule.onNodeWithText("Ada").assertIsDisplayed()
composeTestRule.onNodeWithText("Save").performClick()

assertThat(saved).isTrue()

This avoids constructing ViewModels, components, repositories, navigation, and dependency graphs for layout behavior.

Semantics first

Assert semantics when behavior is semantic:

  • Text exists: onNodeWithText.
  • Button is enabled/disabled: assertIsEnabled, assertIsNotEnabled.
  • Content is selected/focused/toggled: use semantics assertions.
  • Content is absent: assertDoesNotExist.

Use test tags for nodes that have no stable user-visible text or where multiple nodes share text. Do not use tags as the first choice for all assertions; user-visible semantics are usually stronger.

Callback testing

Use simple counters or captured values:

var selectedId: String? = null

composeTestRule.setContent {
    ItemList(
        items = listOf(ItemUi("movie-1", "Movie")),
        onItemClick = { selectedId = it },
    )
}

composeTestRule.onNodeWithText("Movie").performClick()

assertThat(selectedId).isEqualTo("movie-1")

For plain captured callback values, a direct assertion after the action is usually enough. Use runOnIdle when the assertion needs Compose to finish applying snapshot state, recomposition, or queued UI work before reading the result.

Keep UI tests deterministic

For layout, branch, and callback behavior, render controlled state with setContent instead of constructing the production app graph. Production DI, repositories, lifecycle observers, and background effects add asynchronous work that is irrelevant to a plain UI contract and can make the test flaky.

Do not use Thread.sleep to wait for Compose. Drive the UI to a known state, then use semantic assertions and Compose synchronization (waitForIdle, runOnIdle, or a bounded waitUntil for a real asynchronous condition). If you set mainClock.autoAdvance = false, advance the clock (mainClock.advanceTimeBy) to the time you intend to observe before asserting, not between checks of one frame; otherwise leave auto-advance on. Reserve full-app integration for behavior that actually depends on navigation, lifecycle, DI, or platform wiring.

Interaction state with MutableInteractionSource

When interaction state is the concern, read the interaction-state procedure completely before writing or reviewing the test. It requires direct, injected interaction state rather than fragile pointer simulation.

Keyboard and focus

For keyboard, TV, and desktop UI, drive navigation with the same input model users use (keys/D-pad), not clicks alone. Assert focused semantics, not colors or scale; reserve screenshots for visual focus treatment. If the inspected composable exposes no input surface that can change the state, name the missing host or parent interaction seam before proposing a key-driven test; do not assume a selector or control exists in the supplied UI.

Details—focus graph, FocusRequester, restoration, key handlers, and test patterns: compose-focus-navigation.

Screenshot tests

Use screenshots for visual contracts that semantics cannot prove:

  • Layout spacing/alignment.
  • Themed colors, typography, elevation, shadows.
  • Image composition, gradients, overlays.
  • Focus highlight appearance.
  • Loading skeletons or dense visual states.

Keep screenshot state deterministic:

  • Use fixed state data.
  • Freeze clocks or animation progress when possible.
  • Replace network/image loading with fake or preview handlers.
  • Avoid asserting dynamic text such as current time unless controlled.
When screenshot defaults change
  • Keep an intentionally changed named preset or default in the test and update its baseline. Do not substitute a raw value to retain the old image; preserve assertions and tolerances unless independently justified.
  • Keep an explicit fixed value when that fixed resolution or geometry is the contract.
  • Verify recording separately from comparison: inspect the expected artifact paths and intentional baseline diff. Read the exact output path from the test, confirm that artifact exists, and name that literal path in the verification evidence. When a verification log reports a pass, state what passed and then check recording independently; a passing comparison does not prove that recording wrote the artifact. If the artifact or baseline diff is unavailable, report that gap rather than claiming recording succeeded. Keep tool-specific commands in the repository runbook. In a findings-only review, state what evidence is missing; do not add remediation or rerun steps.

Fake images and platform services

When image content is irrelevant, fake the loader and assert the requested model if that is the behavior. The exact hook depends on your image library; a project helper might look like this:

val requestedModels = mutableListOf<Any?>()

// Example helper, not a Compose API.
setContentWithFakeImageLoader { request ->
    requestedModels += request.data
    errorPainter()
}

When image appearance matters, provide a deterministic local painter/bitmap instead of network data.

Bundled files

FAQ

What does Compose UI Testing Patterns do?

Use when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.

Who made Compose UI Testing Patterns?

chrisbanes (a community member) publishes it in the chrisbanes/skills repository on GitHub.

Is Compose UI Testing Patterns free?

Yes. Compose UI Testing Patterns is open source, published by chrisbanes under the Apache-2.0 license.

What comes with Compose UI Testing Patterns?

Its instructions and 1 file the agent reads only when a task needs them, such as references, examples or scripts.

Which agents can use Compose UI Testing Patterns?

Any coding agent that reads SKILL.md files, including Claude Code, Codex, Cursor, GitHub Copilot and Gemini CLI. The agent loads the skill when a task matches its description.

What are agent skills?

An agent skill is a folder with a SKILL.md file: instructions that teach a coding agent how to do one kind of task, and optionally files it can read while it works. The agent keeps only the skill's name and description in mind and reads the rest when a task calls for it.

How are agent skills different from MCP servers?

An MCP server gives an agent new tools to call, code that runs somewhere and returns results. A skill gives it knowledge: how to approach a task with the tools it already has. Many agents use both.

How can my agent test my Android app?

Robomori lets coding agents create, start and control Android emulators and devices from one command, so they can install your app, take screenshots and check dark mode, font sizes and languages.

You're subscribed

The next lesson lands in on Wednesday.