compose-ui-testing-patterns

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

1|Updated Jul 6, 2026
One-click install
npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-ui-testing-patterns-citytexi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-ui-testing-patterns
Source: https://github.com/citytexi/team-yg-pesonal-agent/tree/main/.claude/skills/compose-ui-testing-patterns
Command: npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-ui-testing-patterns-citytexi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Compose UI tests often become flaky, over-scoped, or assert the wrong thing—spinning up full DI graphs to check a text label, simulating pointer events to trigger 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 from a coroutine scope instead of fragile pointer simulation. - Deterministic screenshot tests: Guidance on faking image loaders, freezing clocks, and fixing state so visual assertions stay stable. - Use Case: While reviewing a pull request, you notice a test builds the full ViewModel and repository graph just to verify an error row renders. Apply this Skill to rewrite it as a plain UI test passing state = Error directly, then assert with semantics. ## 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.

How do I test a Compose screen without building ViewModels and DI?▼

Test the plain state-driven UI composable directly by passing a fixed UiState and callback lambdas in composeTestRule.setContent. Assert displayed text with semantics and verify callbacks by capturing values in local variables, avoiding ViewModels, repositories, and navigation entirely.

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.

Why are my Compose screenshot tests flaky?▼

Flakiness usually comes from nondeterministic inputs: real network image loading, live clocks, animations, or dynamic text like current dates. Fix this by faking the image loader, freezing clocks and animation progress, and using fixed state data.

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 with no stable visible text or where multiple nodes share the same text.