Jetpack Compose：如何测试API加载后UI节点的点击导航？

问题根源 #

你的测试依赖真实网络请求，数据加载速度不可控，导致waitUntil超时或列表项无法稳定渲染，测试逻辑自然失效。

解决步骤 #

1. Mock Retrofit 数据源 #

测试环境中替换真实API为Mock实现，直接返回模拟数据，让组件无需等待网络：

class MockFlightApi : FlightApi {
    override suspend fun getFlightList(): List<Flight> {
        // 返回模拟的行程数据
        return listOf(
            Flight(id = 1, title = "测试行程1", /* 其他字段按需填充 */),
            Flight(id = 2, title = "测试行程2", /* 其他字段按需填充 */)
        )
    }
}

在测试初始化时，将ViewModel依赖的真实FlightApi替换为MockFlightApi，确保组件能立即获取数据。

2. 优化测试逻辑 #

• 给每个列表项添加唯一测试标签（比如"flight_item_${flight.id}"），避免依赖父组件的子节点顺序查找
• 直接定位目标列表项，跳过不稳定的父节点等待逻辑

调整后的测试代码：

@Test
fun navigation_navigateToInfoScreen() {
    // 初始化Mock API和ViewModel
    val mockFlightApi = MockFlightApi()
    val viewModel = FlightViewModel(mockFlightApi)

    // 启动Compose测试内容
    composeTestRule.setContent {
        MyAppTheme {
            val navController = rememberNavController()
            FlightListScreen(viewModel = viewModel, navController = navController)
        }
    }

    // 验证列表项存在并执行点击
    composeTestRule.onNodeWithTag("flight_item_1")
        .assertExists()
        .performClick()

    // 校验导航结果
    assertThat(navController.currentDestination?.route).isEqualTo(Screen.Info.route)
}

3. 处理加载状态（可选） #

如果组件显示加载指示器，可给它添加测试标签，确保加载完成后再操作：

// 等待加载指示器消失
composeTestRule.waitUntil(timeoutMillis = 2000) {
    composeTestRule.onNodeWithTag(Constants.TEST_TAG_LOADING_INDICATOR).fetchSemanticsNodes().isEmpty()
}

核心原则 #

UI测试绝对不能依赖真实网络请求，Mock数据源是保证测试稳定、快速的关键；给每个可交互元素设置唯一测试标签，能让测试逻辑更可靠，避免因UI结构变化导致测试失效。

内容的提问来源于stack exchange，提问作者deja