UI bugs are sneaky. Everything looks fine on your device, animations feel smooth, and then - someone reports that a button doesn't respond, a screen doesn't load, or a critical flow breaks on a specific device. By the time you hear about it, the damage is already done.
This is where UI testing earns its keep.
With Jetpack Compose becoming the standard way to build Android UIs, testing strategies need to evolve as well. Espresso is still a powerful UI testing tool - but testing Compose-based UIs requires a slightly different mindset.
Let's walk through how to test Jetpack Compose UIs using Espresso, step by step, in a way that actually makes sense when you sit down to write tests.
Prerequisites
Before jumping into writing tests, make sure you have the basics in place:
- An Android project using Jetpack Compose
- Android Studio Arctic Fox or newer
- Basic familiarity with:
- Jetpack Compose
- Espresso
- JUnit
- UI tests enabled in your project (androidTest source set)
If you already have a Compose screen running, you're good to go.
Setting Up Espresso for a Compose Project
Jetpack Compose doesn't replace Espresso - it complements it. Espresso still handles UI synchronization and assertions, while Compose provides its own testing APIs.
In your app module, make sure you have the required dependencies:
androidTestImplementation 'androidx.test.espresso:espresso-core:<version>'
androidTestImplementation 'androidx.test.ext:junit:<version>'
This setup allows Espresso and Compose Test APIs to work together seamlessly.
Writing Your First Espresso Test with Jetpack Compose
Let's put theory into practice and write a simple UI test. The goal here isn't to be fancy - it's to understand how Espresso and Jetpack Compose work together in a real test scenario.
We'll create a test that checks whether a button is visible on the screen and then performs a click on it.
Step 1: Create a UI test class
Start by creating a new Kotlin file inside your app's androidTest directory. You can name it something like ExampleEspressoTest.
This file will hold all your UI test logic.
Step 2: Import the required dependencies
You'll need imports from both Jetpack Compose testing and Espresso:
import androidx.compose.ui.test.*
import androidx.compose.ui.test.junit4.*
import androidx.test.espresso.Espresso.*
import androidx.test.espresso.matcher.ViewMatchers.*
import org.junit.Rule
import org.junit.Test
These give you access to Compose test rules, UI matchers, and Espresso actions.
Step 3: Set up the Compose test rule
The test rule is what launches your Compose content in a controlled testing environment:
class ExampleEspressoTest {
@get:Rule
val composeTestRule = createComposeRule()
}
This rule tells the test runner how to render Compose UI before running assertions.
Step 4: Write your first test
Now for the actual test. We'll render a simple button and verify two things:
- The button is visible
- The button can be clicked
@Test
fun testButtonVisibilityAndClick() {
composeTestRule.setContent {
Button(
onClick = { }
) {
Text("Click Me")
}
}
onView(withText("Click Me")).check(matches(isDisplayed()))
onView(withText("Click Me")).perform(click())
}
What's happening here:
setContent renders a Compose UI just for this test- Espresso verifies the button exists on screen
- Espresso simulates a real user click
This might look simple - and that's the point. UI tests should clearly describe user behavior, not hide it behind complexity.
Step 5: Run the test
You can run the test directly from Android Studio or use the test runner to execute it as part of your test suite.
Once it passes, you've officially written and executed your first Espresso test for a Jetpack Compose UI.
From here, you can expand into testing state changes, navigation, error states, and full user flows.
Working with Matchers and Actions
Even when you're testing Jetpack Compose UI, Espresso's core ideas - matchers and actions - still apply. The difference is what you're interacting with. Instead of traditional View objects, you're now targeting Compose-based UI elements.
Matchers help Espresso find the UI element you care about, while actions define what you want to do with it - just like a real user would.
Commonly Used Matchers
Matchers are used to locate Compose components based on their properties:
withText("text") - Finds a composable that displays the given text.isDisplayed() - Ensures the composable is currently visible on the screen.
These matchers make your tests readable and expressive, almost like describing what a user sees.
Commonly Used Actions
Actions simulate user interactions:
click() - Performs a tap on the matched Compose component.
When combined, matchers and actions let you write tests that read like user behavior:
"Find this button, make sure it's visible, then tap it."
This approach keeps your tests focused on what the user does, not on internal implementation details - which is exactly how good UI tests should behave.
Testing Jetpack Compose Components
When testing Compose components, you can use the onNode method to target specific components.
For example, to test a Button component:
onNode(hasText("Click Me")).performClick()
Verifying Assertions the Right Way
Assertions tell you whether your UI behaves as expected. For example:
isDisplayed(): Checks if the Compose component is currently visible on the screen.hasText("text"): Checks if the Compose component contains the specified text.
Conclusion
Testing Jetpack Compose UI with Espresso isn't complicated - but it does require a shift in how you think about UI testing.
Compose simplifies UI structure.
Espresso ensures stability.
Assertions keep regressions in check.
Together, they help you ship UIs that behave correctly - not just in demos, but on real devices, under real conditions.
Because the best UI bug is the one your users never see.
Happy testing.
