[Android] Jetpack Compose 테스트코드 어떻게 짜는거예요?

윤호이·2023년 10월 31일

TDD android jetpack compose junit kotlin test code

Test

목록 보기

4/13

서론

기존에 간단한 유닛 테스트를 짜보셨다면
테스트 코드에 어느정도 자신이 붙으셨을 겁니다.
하지만 UI 테스트 코드라면??
자신 있으신가요?

기존 테스트 코드

 @Test
    fun `안녕_세계`() {
        // Given 초기 상태
        val string1 = "Hello, "
        val string2 = "World!"

        // When 결과 값 획득
        val result = string1 + string2

        // Then 기대값과 결과 비교
        val expected = "Hello, World!"
        assertEquals(expected, result)
    }

굉장히 흔한 유닛 테스트 코드죠?
given when then의 형식으로 짜는게 정석입니다.
그렇다면 compose 테스트코드는 어떨까요?

compose 테스트 코드 형식

composeTestRule{.finder}{.assertion}{.action}

compose의 테스트 코드는 이런 형식으로 구성됩니다.

finder : 원하는 UI 요소를 쿼리해줍니다.
assertion : 해당 UI 요소가 특정 조건에서 참인지 거짓인지 확인해줍니다.
action : 해당 UI 요소에게 특정 행동을 합니다.

흠... 아직은 감 안잡히시죠?

어떤걸 테스트 해봐야하죠?

@Composable
fun TestScreen() {
    val isClick = remember { mutableStateOf(false) }
    Button(onClick = {isClick.value = !isClick.value}) {
        Text(text = if(!isClick.value) "click!" else "clicked")
    }
}

해당 composable 함수를 테스트 해봅시다.

1.버튼이 존재하는지
2.버튼이 UI에 표시되는지
3.버튼을 눌렀을때 제대로 동작하는지

이 세가지를 테스트 해봅시다.

의존성 추가

androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.5.4")
debugImplementation("androidx.compose.ui:ui-test-manifest:1.5.4")

해당 의존성을 App gradle에 추가해주세요

테스트 클래스 생성

class ScreenTest {

}

androidTest 폴더 안에 테스트 클래스를 생성해 줍시다.

@get:Rule
val composeRule = createComposeRule()

해당 코드를 추가해서 compose를 테스트 할 수 있게 준비해줍시다.

테스트 함수 작성

버튼이 존재하는지

    @Test
    fun `버튼이_존재하는지_확인한다`(){
        composeRule.setContent {
            TestScreen()
        }

        composeRule.onNodeWithText("click!").assertExists()
    }

setContent에 테스트에 사용할 UI를 지정해줍시다.

composeRule -> TestScreen 에 있는 요소를 탐색할거야!
.onNodeWithText("click!") -> click! 이라는 Text를 가진 UI 요소(노드)를 찾고싶어!
.assertExists() -> 해당 노드는 존재해?

대충 이런 느낌입니다.
생각보다 별거 없죠?

버튼이 UI에 표시되는지

    @Test
    fun `버튼이_표시되는지_확인한다`(){
        composeRule.setContent {
            TestScreen()
        }

        composeRule.onNodeWithText("click!").assertIsDisplayed()
    }

assertIsDisplayed 이거 하나만 바뀌었습니다.

버튼을 눌렀을때 제대로 동작하는지

    @Test
    fun `버튼이_동작하는지_확인한다`(){
        composeRule.setContent {
            TestScreen()
        }

        //when
        composeRule.onNodeWithText("click!").performClick()

        //then
        composeRule.onNodeWithText("clicked").assertIsDisplayed()
    }

이번엔 버튼을 클릭했을때! 를 테스트 하고싶으니
performClick으로 action을 취해야겠죠?
그럼 이제 clicked가 버튼에 표시되는것을 확인하면 테스트가 성공합니다.