DEV Community

Aleksei Laptev
Aleksei Laptev

Posted on • Edited on • Originally published at mardsoul.github.io

Using MockK library in Jetpack Compose Preview

#android #kotlin #compose #beginners

Starting

What is Preview? It's a functionality that gives your an opportunity for view a composable UI during development without the need to build and run on an emulator. (If you use the Android Studio obviously)

Problem

In fact you must have a some data that you wanna see in preview. But sometimes it's impossible.

Imagine, you have a screen like this:

@Composable fun SomeScreen( viewModel: SomeViewModel = hiltViewModel(), ){ //some UI }
Enter fullscreen mode Exit fullscreen mode

And view model of that screen like this:

@HiltViewModel class SomeViewModel @Inject constructor( private val someUseCase1: someUseCase1, private val someUseCase2: someUseCase2 //etc ) : ViewModel() { val someDataFLow1 = someUseCase1.getSomeData() .stateIn( scope = viewModelScope, started = SharingStarted.WhileSubscribed(5_000), initialValue = null ) //etc }
Enter fullscreen mode Exit fullscreen mode

And that's all. How can you make a preview? - Directly, no how.

Solution

Use MockK library. It's an open-source and excellent library for testing. Okay, it's for testing... But why can't we use it for debugging and preview? - Of course, we can!

First of all we have to add dependencies

//Compose implementation(platform("androidx.compose:compose-bom:<bom-version>")) //other compose dependencies //Preview debugImplementation("androidx.compose.ui:ui-tooling") debugImplementation("androidx.compose.ui:ui-tooling-preview") //MockK debugImplementation("io.mockk:mockk:<mockk-version>")
Enter fullscreen mode Exit fullscreen mode

Here's our project structure

└── src/ ├── main/ │ └── kotlin/ │ └── yourpackage/ │ ├── SomeScreen.kt │ └── SomeViewModel.kt │ └── debug/ └── kotlin/ └── yourpackage/ └── preview/ ├── SomeScreenPreview.kt └── MockEntities.kt
Enter fullscreen mode Exit fullscreen mode

We have to add a mock ViewModel by MockK library and setup it's behavior:

internal object MockEntities { private val mockData = listOf( SomeDataItem(id = 1), SomeDataItem(id = 2), SomeDataItem(id = 3), SomeDataItem(id = 4), ) private val mockDataFlow1 = MutableStateFlow(mockData) val someViewModel = mockk<SomeViewModel>().apply { every { someDataFLow1 } returns mockDataFlow1 } }
Enter fullscreen mode Exit fullscreen mode

And a final function is a Preview itself:

@Composable @Preview private fun SomeScreenPreview() { YourTheme { SomeScreen( viewModel = MockEntities.someViewModel ) } }
Enter fullscreen mode Exit fullscreen mode

So, that was a little trick. I hope it helps you in your work :)

Top comments (0)