Jetpack Compose Testing: Strategies for Bulletproof UI

// build.gradle.kts
// androidTestImplementation("androidx.compose.ui:ui-test-junit4")
// Needed for createComposeRule(), not for createAndroidComposeRule<A>():
// debugImplementation("androidx.compose.ui:ui-test-manifest")

// v1, deprecated
// import androidx.compose.ui.test.junit4.createComposeRule

// v2: same name, new package
import androidx.compose.ui.test.junit4.v2.createComposeRule

class MyComposeTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun continue_showsWelcome() {
        composeTestRule.setContent {
            MyAppTheme { MainScreen(uiState = fakeUiState) }
        }

        composeTestRule.onNodeWithText("Continue").performClick()
        composeTestRule.onNodeWithText("Welcome").assertIsDisplayed()
    }
}

class LoginScreenTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun validLogin_callsOnLoginSuccess() {
        var loggedIn = false

        composeTestRule.setContent {
            LoginScreen(onLoginSuccess = { loggedIn = true })
        }

        composeTestRule.onNodeWithText("Email")
            .performTextInput("user@example.com")
        composeTestRule.onNodeWithText("Password")
            .performTextInput("secure123")
        composeTestRule.onNodeWithText("Sign In").performClick()

        // The login call is external work: wait for the condition
        composeTestRule.waitUntil(5_000) { loggedIn }

        assertTrue(loggedIn)
    }

    @Test
    fun emptyEmail_showsValidationError() {
        composeTestRule.setContent {
            LoginScreen(onLoginSuccess = {})
        }

        composeTestRule.onNodeWithText("Password")
            .performTextInput("secure123")
        composeTestRule.onNodeWithText("Sign In").performClick()

        composeTestRule.onNodeWithText("Email is required")
            .assertIsDisplayed()
    }

    @Test
    fun results_appearAfterLoading() {
        composeTestRule.setContent { SearchScreen() }

        composeTestRule.onNodeWithText("Search").performClick()

        composeTestRule.waitUntilExactlyOneExists(hasText("3 results"), 5_000)
    }
}

sealed interface ProfileState {
    data object Loading : ProfileState
    data class Success(val user: User) : ProfileState
    data class Error(val message: String) : ProfileState
}

// Stateless: everything it shows comes in as a parameter
@Composable
fun ProfileScreen(
    state: ProfileState,
    onRetry: () -> Unit,
    modifier: Modifier = Modifier,
) { /* ... */ }

// Stateful wrapper: the only place that knows the ViewModel
@Composable
fun ProfileRoute(viewModel: ProfileViewModel = hiltViewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()
    ProfileScreen(state = state, onRetry = viewModel::load)
}

class ProfileScreenTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun success_showsUser() {
        val user = User(id = "1", name = "Rocky", email = "r@test.com")

        composeTestRule.setContent {
            ProfileScreen(state = ProfileState.Success(user), onRetry = {})
        }

        composeTestRule.onNodeWithText("Rocky").assertIsDisplayed()
        composeTestRule.onNodeWithText("r@test.com").assertIsDisplayed()
    }

    @Test
    fun error_offersRetry() {
        var retried = false

        composeTestRule.setContent {
            ProfileScreen(
                state = ProfileState.Error("Network error"),
                onRetry = { retried = true },
            )
        }

        composeTestRule.onNodeWithText("Network error").assertIsDisplayed()
        composeTestRule.onNodeWithText("Retry").performClick()
        assertTrue(retried)
    }
}

// build.gradle.kts (module)
plugins {
    id("io.github.takahirom.roborazzi")
}

dependencies {
    testImplementation("io.github.takahirom.roborazzi:roborazzi:1.76.0")
    testImplementation("io.github.takahirom.roborazzi:roborazzi-compose:1.76.0")
    testImplementation("org.robolectric:robolectric:4.17")
}

@RunWith(AndroidJUnit4::class)
@GraphicsMode(GraphicsMode.Mode.NATIVE)
class ProfileCardScreenshotTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    private val user = User(id = "1", name = "Rocky", email = "r@test.com")

    @Test
    fun profileCard_light() {
        composeTestRule.setContent {
            AppTheme(darkTheme = false) { ProfileCard(user = user) }
        }

        composeTestRule.onNodeWithTag("profile_card")
            .captureRoboImage("screenshots/profile_card_light.png")
    }

    @Test
    fun profileCard_dark() {
        composeTestRule.setContent {
            AppTheme(darkTheme = true) { ProfileCard(user = user) }
        }

        composeTestRule.onNodeWithTag("profile_card")
            .captureRoboImage("screenshots/profile_card_dark.png")
    }
}

// ./gradlew recordRoborazziDebug    record reference images
// ./gradlew verifyRoborazziDebug    fail on any difference (CI)
// ./gradlew compareRoborazziDebug   write diff images for review