測試 Compose Multiplatform UI

Compose Multiplatform 中的 UI 測試是使用與 Jetpack Compose 測試 API 相同的尋找器、斷言、動作和比對器來實現的。如果您不熟悉這些內容，請在繼續閱讀本文之前，先閱讀 Jetpack Compose 指南。

此 API 處於 實驗性 階段。 未來可能會有所變動。

Compose Multiplatform 測試與 Jetpack Compose 的不同之處

Compose Multiplatform 通用測試 API 不依賴於 JUnit 的 TestRule 類別。相反地，您需要呼叫 runComposeUiTest 函數，並在 ComposeUiTest 接收器上呼叫測試函數。

然而，基於 JUnit 的 API 可用於 桌面目標。

使用 Compose Multiplatform 編寫和執行測試

首先，為模組新增測試的原始碼集和必要的相依性。然後，編寫並執行範例測試，並嘗試自訂它。

建立測試原始碼集並將測試函式庫新增至相依性

為了提供具體範例，本頁上的說明遵循 Kotlin Multiplatform wizard 產生的專案結構。如果您要為現有專案新增測試，則可能需要將路徑和指令中的 composeApp 替換為您正在測試的模組名稱（例如 shared）。

建立一個通用測試原始碼集並新增必要的相依性：

1. 為通用測試原始碼集建立目錄：composeApp/src/commonTest/kotlin。

2. 在 composeApp/build.gradle.kts 檔案中，新增以下相依性：

   kotlin {
       //...
       sourceSets { 
           val jvmTest by getting
   
           // Adds common test dependencies
           commonTest.dependencies {
               implementation(kotlin("test"))
           
               @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
               implementation(compose.uiTest)
           }
   
           // Adds the desktop test dependency
           jvmTest.dependencies { 
               implementation(compose.desktop.currentOs)
           }
       }
   }

3. 如果您需要為 Android 執行儀器化 (模擬器) 測試，請修改您的 Gradle 組態，如下所示：

   1. 將以下程式碼新增到 androidTarget {} 區塊，以組態儀器化測試原始碼集，使其依賴於通用測試原始碼集。

      kotlin {
          //...
          androidTarget { 
              @OptIn(ExperimentalKotlinGradlePluginApi::class)
              instrumentedTestVariant.sourceSetTree.set(KotlinSourceSetTree.test)
              //...
          }
          //... 
      }

   2. 按照 IDE 的建議新增任何缺失的 import。

   3. 將以下程式碼新增到 android.defaultConfig {} 區塊，以組態 Android 測試儀器化執行器：

      android {
          //...
          defaultConfig {
              //...
              testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
          }
      }

   4. 將所需的相依性新增到根 dependencies {} 區塊中：

      dependencies { 
          androidTestImplementation("androidx.compose.ui:ui-test-junit4-android:1.9.4")
          debugImplementation("androidx.compose.ui:ui-test-manifest:1.9.4")
      }

4. 在主選單中選取 Build | Sync Project with Gradle Files，或按一下組建腳本編輯器中的 Gradle 重新整理按鈕。

現在，您已準備好為 Compose Multiplatform UI 編寫和執行通用測試。

編寫和執行通用測試

在 composeApp/src/commonTest/kotlin 目錄中，建立一個名為 ExampleTest.kt 的檔案，並將以下程式碼複製到其中：

import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.assertTextEquals
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.runComposeUiTest
import kotlin.test.Test

class ExampleTest {

    @OptIn(ExperimentalTestApi::class)
    @Test
    fun myTest() = runComposeUiTest {
        // Declares a mock UI to demonstrate API calls
        //
        // Replace with your own declarations to test the code of your project
        setContent {
            var text by remember { mutableStateOf("Hello") }
            Text(
                text = text,
                modifier = Modifier.testTag("text")
            )
            Button(
                onClick = { text = "Compose" },
                modifier = Modifier.testTag("button")
            ) {
                Text("Click me")
            }
        }

        // Tests the declared UI with assertions and actions of the Compose Multiplatform testing API
        onNodeWithTag("text").assertTextEquals("Hello")
        onNodeWithTag("button").performClick()
        onNodeWithTag("text").assertTextEquals("Compose")
    }
}

要執行測試：

iOS 模擬器Android 模擬器桌面Wasm (無頭瀏覽器)

您有兩個選項：

• 在 Android Studio 中，您可以按一下 myTest() 函數旁邊行號區中的綠色執行圖示，選擇 Run | ExampleTest.myTest，然後選擇 iOS 目標進行測試。

• 在終端中執行以下指令：

  ./gradlew :composeApp:iosSimulatorArm64Test

在終端中執行此指令：

./gradlew :composeApp:connectedAndroidTest

目前，您無法使用 android (local) 測試組態執行通用 Compose Multiplatform 測試，因此 Android Studio 中的行號區圖示等將無濟於事。

您有兩個選項：

• 按一下 myTest() 函數旁邊行號區中的綠色執行圖示，然後選擇 Run | ExampleTest.myTest，然後選取 JVM 目標。

• 在終端中執行以下指令：

  ./gradlew :composeApp:jvmTest

在終端中執行此指令：

./gradlew :composeApp:wasmJsTest

後續步驟

現在您已經掌握了 Compose Multiplatform UI 測試的訣竅，您可能想查看更多與測試相關的資源：

• 有關 Kotlin Multiplatform 專案中測試的總體概述，請參閱 了解基本專案結構 和 測試您的多平台應用程式 教學課程。
• 有關設定和執行桌面目標的 JUnit 測試的詳細資訊，請參閱 使用 JUnit 測試 Compose Multiplatform UI。
• 有關本地化測試，請參閱 undefined。
• Android Studio 中更進階的測試，包括自動化，涵蓋在 Android Studio 文件中的 測試您的應用程式 文章。