Jetpack compose support

[noahjutz]

I would like to use junit 5 to test my jetpack compose project.

A compose test rule is required for setting up the UI and using Testing APIs: (documentation)

@get:Rule
val composeTestRule = createAndroidComposeRule<MyActivity>()

This only works for junit 4. Is there any way to use junit 5 with jetpack compose?

[mannodermaus]

Thank you for bringing this up! Unfortunately, test rules are a concept exclusive to JUnit 4 and a new implementation is required to make them work with JUnit 5 (similar to the ActivityScenario support we already have). While I have done some work with Jetpack Compose, I haven't had the chance to look into testing and specifically how the ComposeTestRule works. In a nutshell, you'd have to convert its content to JUnit 5 extension points such as BeforeEachCallback and AfterEachCallback.

I might consider ramping up a library for Compose support in the near future, once that API stabilizes a little further. Until then, please continue to write your Compose UI tests against the JUnit 4 APIs. If you don't mind, I'd like to keep this ticket around to keep visibility and gauge interest from people towards this feature. 🙏

[Nikola-Milovic]

Any update on this? Compose is getting its stable release now (currently 1.0.0-rc02) .

[mannodermaus]

Nothing substantial. I did have a look through the test source code of Jetpack Compose a few months ago, unfortunately leaving quite disappointed: There is a lot of tight coupling to JUnit 4 so we'd need to copy-paste and rewrite the entire thing, pretty much. I would've liked some sort of abstraction similar to what recent efforts in androidx.test have brought to the table. That's why I'm a little hesitant to fully commit to this right away. I'll give it another look after 1.0 stable is released

[mannodermaus]

I was celebrating the stable release of Jetpack Compose by giving the integration another shot. It's a very, very simple example but I managed to create a bridge to Compose via the existing JUnit 4 stuff. Feels great to see a @ParameterizedTest driving a Composable <3

There's still a lot to come and I need many more hours to refine this hacky approach, but I'm quite happy about this. 🎉🎉

[Nikola-Milovic]

Seems promising!

[balazsbanyai]

Looks great! Would you mind sharing the extension's code as a workaround until this feature is released?

[mannodermaus]

I've spent a bit of time drafting the initial PR for this and pulled in what I had been experimenting with before. You can get it from Sonatype's snapshot repository:

dependencies {
  androidTestImplementation("de.mannodermaus.junit5:android-test-compose:0.1.0-SNAPSHOT")
}

Usage:

class YourTest {
  @RegisterExtension
  @JvmField
  val extension = createComposeExtension()

  @Test
  fun test() {
    extension.setContent {
      // Your composable
    }
  }
}

I'll be tracking progress over time over at #257

[VitaliyDoskoch]

I created a simple workaround for this. All you need is:

1. To create an Extension like this:

class ComposeRuleExtension : ParameterResolver {

    private val rule by lazy { createComposeRule() }

    override fun supportsParameter(parameterContext: ParameterContext, extensionContext: ExtensionContext): Boolean {
        return parameterContext.parameter.type == ComposeRuleRunner::class.java
    }

    override fun resolveParameter(parameterContext: ParameterContext, extensionContext: ExtensionContext): Any {
        return ComposeRuleRunner(
            rule,
            Description.createTestDescription(
                extensionContext.testClass.orElse(this::class.java),
                extensionContext.displayName
            )
        )
    }
}

2. To create the runner for the extension:

class ComposeRuleRunner(private val rule: ComposeContentTestRule, private val description: Description) {
    fun run(action: ComposeContentTestRule.() -> Unit) {
        rule
            .apply(
                object : Statement() {
                    override fun evaluate() {
                        action.invoke(rule)
                    }
                },
                description
            )
            .evaluate()
    }
}

Now you can use the Extension:

@RunWith(AndroidJUnit4ClassRunner::class)
@ExtendWith(ComposeRuleExtension::class)
class MyTest {
    @Test
    @DisplayName("JUnit5 test with `createComposeTestRule()`")
    fun test1(runner: ComposeRuleRunner) = runner.run {
        setContent {
            MyTheme {
                MyScreen()
            }
        }

        onNodeWithText("Hello, world!", ignoreCase = true).assertExists()
    }
}

For me it works for now. And there are no dangerous pitfalls with threads here

[mannodermaus]

Thanks for your input @VitaliyDoskoch! I like how your solution works without any multithreading, it's very concise in that way. One of the things that is lacking with the @ExtendWith approach however is that the user wouldn't be able to configure the rule for their specific test class, since the usage of createComposeRule() is hardcoded into the extension.

I've taken it as inspiration to draft a new version of the ComposeExtension which works both ways:

1. When the defaults are enough, @ExtendWith(AndroidComposeExtension::class) can be used globally or on the class level and the ComposeExtension is resolved as a parameter
2. When the user needs to configure the rule, they can keep using createAndroidComposeExtension() with their activity class and other parameters, then mark that field with @RegisterExtension

// Usage 1
@ExtendWith(AndroidComposeExtension::class)
class ClassComposeExtensionTests {

    @Test
    fun test(extension: ComposeExtension) = extension.runComposeTest {
        setContent {
            Column {
                Text(text = "Hello World")
            }
        }

        onNodeWithText("Hello World").assertIsDisplayed()
    }
}

// Usage 2
class FieldComposeExtensionTests {
    @JvmField
    @RegisterExtension
    val extension = createAndroidComposeExtension<MyCustomActivity>()

    @Test
    fun test() = extension.runComposeTest {
        setContent {
            Column {
                Text(text = "Hello World")
            }
        }

        onNodeWithText("Hello World").assertIsDisplayed()
    }
}

I'm very glad that I could delete the thread shenanigans again. Expect a new snapshot of 0.1.0 for the compose artifact within the next couple of hours.

[Piotr-Smietana-Intent]

I've run into an issue with 1.0.0-SNAPSHOT version. The problem is that I cannot use ComposeContext outside of extension.runComposeTest { }, since currently there is no other way to get ComposeContext. This makes any UI compose actions in @BeforeEach methods impossible - if I use another extension.runComposeTest { } in @BeforeEach, it'l be treated as separate, isolated test and won't apply to regular @Test. This kinda defeats the purpose of using junit5 for me since I cannot do "step-by-step" setup in @Nested classes.

code examples:

using junit4

@get:Rule
    val composeTestRule = createAndroidComposeRule<LoginActivity>()

    @Before
    fun setUp() {
        composeTestRule.onNodeWithText("Next").performClick()
    }

    @Test
    fun errorDisplayed() {
        composeTestRule.onNodeWithText(getStringResource(R.string.empty_email_error)).assertIsDisplayed()
    }

trying to achieve the same with junit5

@ExtendWith(AndroidComposeExtension::class)
internal class MyTest {

    @JvmField
    @RegisterExtension
    val extension = createAndroidComposeExtension<LoginActivity>()

    @BeforeEach
    // setUp() is treated as a separate test, so click() doesn't happen when errorDisplayed() is run
    fun setUp() = extension.runComposeTest {
        onNodeWithText("Next").performClick()
    }

    @Test
    fun errorDisplayed() = extension.runComposeTest {
        onNodeWithText(getStringResource(R.string.empty_email_error)).assertIsDisplayed()
    }
}

I've tried to workaround it with:

• using espresso, but espresso matchers aren't well suited for compose (e.g. to match button by text instead of ID (as compose has no IDs) one has to write a custom matcher)
• saving ComposeContext outside of extension.runComposeTest { }, like:

            @BeforeEach
            fun setUp() {
                extension.runComposeTest { composeRule = this }
                composeRule.onNodeWithText("Next").performClick()
            }

        but it fails with `IllegalStateException: Test not setup properly. Use a ComposeTestRule in your test to be able to interact with composables`

Is there any way out of this situation (apart from writing monolithic tests without @BeforeEach use or reverting to junit4) ?

[Piotr-Smietana-Intent]

Also I've noticed another, minor issue - ComposeContext, being an alias to ComposeContentTestRule, does not allow to directly access to activity (which is defined in ComposeContentTestRule implementation, AndroidComposeTestRule), like it used in junit4:

junit4:

@get:Rule
    val composeTestRule = createAndroidComposeRule<LoginActivity>()

    @Test
    fun test() {
        composeTestRule.activity
    }

junit5 has to cast ComposeContext to AndroidComposeTestRule first, which is not terrible but still inconvenient

    @JvmField
    @RegisterExtension
    val extension = createAndroidComposeExtension<LoginActivity>()    

    @Test
    fun test() = extension.runComposeTest {
        // this won't compile
        //this.activity

        // this works
        (this as AndroidComposeTestRule<*, *>).activity
    }

[mannodermaus]

Thanks for your feedback, @Piotr-Smietana-Intent! I'm also not quite happy with the extension API for JUnit 5 yet, and your BeforeEach example illustrates this pretty well, too.

[ILikeYourHat]

Any plans to make this support stable? 🙂