compose-ui-testing-patterns

Guides writing and reviewing Jetpack Compose UI tests, screenshot tests, and interaction-state assertions.

Updated May 21, 2025
One-click install
npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-ui-testing-patterns-albertmartorell1975
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-ui-testing-patterns
Source: https://github.com/albertmartorell1975/MeteoMartoCompose/tree/main/.agents/skills/compose-ui-testing-patterns
Command: npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-ui-testing-patterns-albertmartorell1975

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose UI tests often become flaky, over-scoped, or assert the wrong things—spinning up full DI graphs to check a text label, simulating pointer events to test hover states, or screenshotting content that semantics could verify. This Skill provides decision rules and code patterns for choosing the right test shape and writing deterministic Compose tests. ## Core Features & Use Cases - Test target selection: A decision table mapping what you need to prove (text, callbacks, focus, visuals, navigation) to the right test shape—plain UI test, screenshot test, or integration test. - Interaction state testing: Patterns for injecting MutableInteractionSource and emitting hover, press, focus, and drag interactions instead of fragile pointer simulation. - Deterministic screenshot tests: Guidance on fixed state, frozen clocks, and fake image loaders to eliminate flakiness. - Use Case: When reviewing a pull request where a test constructs a full ViewModel and repository just to verify an error row renders, apply this Skill to rewrite it as a plain state-driven UI test with state = Error. ## Quick Start Ask the AI to review or write a Jetpack Compose UI test for a specific composable using these testing patterns.

Frequently Asked Questions about compose-ui-testing-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test hover or pressed states in Jetpack Compose?▼

Inject a MutableInteractionSource into the composable and emit interactions like HoverInteraction.Enter or PressInteraction.Press from a test coroutine scope, then call waitForIdle and assert the resulting visual or semantic change. Do not simulate pointer or mouse events, which are flaky and environment-dependent.

When should I use screenshot tests vs semantics assertions in Compose?▼

Use semantics assertions for behavioral contracts like text presence, enabled state, or selection. Reserve screenshot tests for visual contracts semantics cannot prove: layout spacing, themed colors, typography, elevation, image composition, and focus highlight appearance.

How do I test a Compose screen without building a ViewModel?▼

If the screen has a state holder and UI split, test the plain UI composable directly by passing a fixed UiState and callback lambdas. Assert displayed content with semantics and verify callbacks with captured values, avoiding ViewModels, repositories, and DI graphs entirely.

Why are my Compose screenshot tests flaky?▼

Flakiness usually comes from dynamic content: real network images, live clocks, animations, or random data. Replace image loading with fake loaders or local painters, freeze clocks and animation progress, and use fixed state data for deterministic captures.

Should I use test tags for all Compose test assertions?▼

No. Prefer user-visible semantics like text, content description, and role first, since they are stronger and closer to real user behavior. Use test tags only for nodes without stable visible text or where multiple nodes share the same text.