Reducing flakes
Previews need to be deterministic in order to render consistently between snapshot runs.
Here are a few tips for common issues we see:
- Don't perform any live network calls. Instead, use a fake network client that serves requests from disk.
- Avoid displaying random values like
UUID
. - Display fixed dates rather than the current time.
- Use a fixed build version.
Android
Lottie flakiness
Emerge recommends forcing Lottie to run on synchronously as a part of any Preview that relies on Lottie animations:
@Preview
fun MyPreview() {
LottieTask.EXECUTOR = Executor(Runnable::run)
MyComposable { .. }
}
Custom Precision
You can reduce the amount of precision required for images to be considered unchanged using the @EmergeSnapshotConfig
annotation's precision
parameter.
@EmergeSnapshotConfig(precision = 0.95f)
@Preview
@Composable
fun MyPreview() { ... }
In the above example, any diff < 5% will not be flagged for the MyPreview
preview.
You'll need to add a dependency on the snapshots-annotations
artifact to use the
@EmergeSnapshotConfig
annotation. This is a lightweight library only containing annotations and has a negligible impact on app size.
dependencies {
debugImplementation("com.emergetools.snapshots:snapshots-annotations:{latest_version}")
}
iOS
To help control for flakiness, HTTP requests through NSURL are blocked while generating snapshots.
If you'd like to conditionally set code when a preview is being rendered by our system, you can check whether the EMERGE_IS_RUNNING_FOR_SNAPSHOTS
environment variable is set to "1"
. For example:
if ProcessInfo.processInfo.environment["EMERGE_IS_RUNNING_FOR_SNAPSHOTS"] == "1" {
return "10 minutes ago"
}
Custom Precision
You can reduce the amount of precision required for images to be considered unchanged using EmergePrecisionModifier
. Add it to your preview by linking SnapshotPreviewsCore
from the SDK and calling .emergeSnapshotPrecision(...)
For example the following preview will only be marked as changed if the diff is greater than 1%.
struct MyComponent_Previews: PreviewProvider {
static var previews: some View {
MyView()
.previewDisplayName("Light")
.emergeSnapshotPrecision(0.99)
}
}
The percentage difference is calculated based on the perceptual difference between pixels, with colors that are more different having a higher percent difference.
Updated 7 days ago