Test Your Jetpack Compose Layout
Is writing a test for jetpack compose layout as easy as writing a test in XML layout? Let’s find out in this article.
Jetpack compose has slowly become popular among android developers these days. However, since it entered its beta phase, jetpack compose has proven its ability as UI tooling.
We at Sampingan have used jetpack compose in our code since they released a beta version, and until we create this article, all contain layouts we had created that has run without any problems.
But, since we previously used the XML to create our layout, migrating our configuration to jetpack has been a difficult challenge, especially when we need to test every feature affected by our migration.
That’s when writing automated tests can save our time a lot.
Setup
The writing instrument test for our jetpack compose layout does not have much distinction from the old XML layout. Therefore, if you already had a test for your previous implementation, it will help you to write the test for jetpack compose because you had just need to translate it to the composed test.
But, if your previous implementation had not a test class yet, don’t worry; this is the right time to write it.
To create a test for your jetpack compose layout, first, you need to implement these dependencies in your `build.gradle` file.
After syncing your Gradle, you can start creating a test class for your jetpack compose layouts.
Test It!
As I said in the previous section, testing in jetpack compose is not different from testing in XML layouts. If you are familiar with espresso; writing a test for composing layout would feel comfortable.
First, you need to define your Rule . Rule is where your layout shows; in jetpack compose test dependencies, you can select either composeTestRule or androidComposeTestRule based on your needs.
Use composeTestRule when you need to test a compose layout in an empty activity to freely customize your layout state. And use androidComposeTestRule if you need to test your compose layout in a specific action with all logic that changes your compose layout based on what form that currently applies.
After you decide what Rule are suitable for your case, you need to define the layout that you want to test using setContent {}
If you have called your composable function into your Rule , you are now ready to test it by calling what components you want to try, performing an action, or asserting it to check if it has met the required conditions.
For example, I have created a Button with three predefined sizes:
- small (height = 28dp)
- medium (height = 36dp)
- large (height = 44dp)
And I want to test if the button has shown the sizes correctly
Jetpack compose using semantic to interact with the UI hierarchy. In the approach above, since our composable component has a text inside it, we can use hasText() as the semantic matcher. That matcher will search through the semantic tree that suits with the matcher. In this case, you will explore any component with the text “Small Button” inside it.
You can also use an extension called
onNodeWithText()to search any node that contains specified text.
If your composable components contain text, it should be easy to match it, but not all components include text; how can we test it? Try using testTag in the modifier as the simplest way to suit the semantic matcher.
Another way to search your component through the semantic hierarchy is using Role Semantic Property. You can explore how to use it in this article by Yasin Kacmac.
If you find any trouble when looking for ways to select any component that you want to test, try to print your semantic tree to log printToLog() method.
And it will show you the semantic tree, so you can find the exact component you want to test, using any semantic matcher that suits the component.
You can explore any ways to search your composable components with any combinations of the semantic matches since jetpack compose has provided many matchers you can use. For example, you can check it in the image below:
In some cases, you might find a situation where your test passes, and sometimes it doesn’t; it is called flaky. In jetpack compose, flaky tests rarely happen. But if this happens to you, try reading Dealing with flaky test by Igor Escodro to solve that issue.
That’s it. We just learned how to create a simple jetpack compose test. If you have found any trouble while creating your test class, just write comments below, and hopefully, we can solve it here.
Anyways, thanks for reading my article! 🚀
