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の提案に従って不足しているインポートを追加してください。

   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 {
        // API呼び出しをデモンストレーションするためのモックUIを宣言します
        //
        // プロジェクトのコードをテストするために、独自の宣言に置き換えてください
        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")
            }
        }

        // Compose MultiplatformテストAPIのアサーションとアクションで宣言されたUIをテストします
        onNodeWithTag("text").assertTextEquals("Hello")
        onNodeWithTag("button").performClick()
        onNodeWithTag("text").assertTextEquals("Compose")
    }
}

テストを実行するには:

iOSシミュレーターAndroidエミュレーターデスクトップWasm（ヘッドレスブラウザ）

2つのオプションがあります:

• Android Studioで、myTest()関数の隣のガターにある緑色の実行アイコンをクリックし、Run | ExampleTest.myTestを選択して、テスト用のiOSターゲットを選択します。
• ターミナルで以下のコマンドを実行します:

./gradlew :composeApp:iosSimulatorArm64Test

ターミナルでこのコマンドを実行します:

./gradlew :composeApp:connectedAndroidTest

現在、android (local)テスト構成を使用して共通のCompose Multiplatformテストを実行することはできません。そのため、例えばAndroid Studioのガターアイコンは役立ちません。

2つのオプションがあります:

• 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ドキュメントのアプリをテストする記事で説明されています。