Writing UI Tests for Jetpack Compose Navigation

How to ensure ‘Navigation in Compose’ works as expected?

Saqib
Jetpack Composers
Published in
3 min readJan 30, 2023

--

Photo by Markus Frieauff on Unsplash

There is a separate story written about How to add Navigation Component in Compose. In this story we will extend it further to add UI Tests making sure navigation logic works as expected.

You can get the project from here and go through it

Testability

To make code testable, we decoupled Navigation logic from Composable/s which enables testability of composable functions separate from NavHost Testing because we don’t need to pass navController in composable functions rather composable functions are exposing a lambda which will be called upon navigation.

Dependency

androidTestImplementation "androidx.navigation:navigation-testing:2.5.3"

Test Tag: Modifier.testTag

To test composable functions, we should add a test tag for the ui component we want to test. Test tag is a string that you assign to a composable UI component using Modifier. e,g we added a test tag for Home Screen via modifier as Modifier.testTag(“test_tag_home_screen”).

You will access the UI component using the test tag in our UI Tests and check visibility and clicks on it.

--

--

Saqib
Jetpack Composers

Senior Mobile Engineer (Android & iOS) , Berlin | Sharing my development experience