🧪 第一个Compose测试

单元测试 · 入门
📌 创建简单Compose组件 ✍️ 编写 @ComposeTestRule 测试用例 🎯 第3课

✨ 从零搭建第一个Compose测试,理解 ComposeTestRule 核心机制,验证UI状态与行为。

创建简单的Compose组件

我们将构建一个带计数器的欢迎卡片,包含标题、点击按钮和动态文本。代码清晰分离,便于单元测试。

// GreetingCard.kt — 一个简单的可组合函数
@Composable
fun GreetingCard(name: String, onGreet: () -> Unit) {
    var count by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "你好, $name! 👋",
            style = MaterialTheme.typography.headlineSmall,
            color = Color(0xFF4E342E)
        )
        Text(
            text = "点击次数: $count",
            modifier = Modifier.padding(vertical = 8.dp),
            fontSize = 18.sp
        )
        Button(onClick = {
            count++
            onGreet()
        }) {
            Text("点我 +1")
        }
    }
}
  • name 参数 — 显示欢迎语
  • count 状态 — 内部计数
  • Button 触发 +1 并回调
  • onGreet 回调 — 便于外部验证
GreetingCard ComposeTestRule count UI
编写第一个 @ComposeTestRule 测试

使用 createComposeRule() 创建测试规则,在 setContent 中加载组件,然后执行断言与交互。

// GreetingCardTest.kt — 单元测试
@RunWith(AndroidJUnit4::class)
class GreetingCardTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun greetingCard_displaysCorrectName_andIncrementsCount() {
        // 准备:设置组件
        var greetCount = 0
        composeTestRule.setContent {
            GreetingCard(name = "小智", onGreet = { greetCount++ })
        }

        // 验证:初始文本
        composeTestRule
            .onNodeWithText("你好, 小智! 👋")
            .assertIsDisplayed()

        composeTestRule
            .onNodeWithText("点击次数: 0")
            .assertExists()

        // 操作:点击按钮
        composeTestRule
            .onNodeWithText("点我 +1")
            .performClick()

        // 验证:计数更新 & 回调触发
        composeTestRule
            .onNodeWithText("点击次数: 1")
            .assertExists()

        assertThat(greetCount).isEqualTo(1)
    }
}
测试规则速查表
匹配器 / 操作用途示例
onNodeWithText("...")按文本查找节点验证标签、按钮文字
assertIsDisplayed()断言组件可见确保UI出现在屏幕上
assertExists()断言节点存在(可能不可见)检查后台状态文本
performClick()模拟点击触发按钮、点击事件
onNodeWithTag()按semantic测试标签查找配合Modifier.testTag()
setContent onNodeWithText assertIsDisplayed performClick

📌 测试核心三步骤

  • 准备 (Arrange) — 通过 setContent 加载Composable
  • 操作 (Act) — 使用 performClick、performTextInput 等交互
  • 断言 (Assert) — 调用 assertIsDisplayed、assertExists 验证结果

💡 提示: 使用 composeTestRule.onRoot() 可打印完整UI树,调试定位节点非常方便。