Snapshot Image Naming Discrepancy & CI/CD Mismatch

[123shruti]

Discussed in #912

^{Originally posted by 123shruti September 24, 2024}
I'm using the this library to create snapshot tests in my iOS project. I have a test case where I dynamically generate different configurations for devices, UI styles, and locales. For each configuration, I'm calling assertSnapshot, passing the respective view and configuration.

Here's a simplified version of my setup:

private func createHostingController(
    view: AssistantStartView,
    deviceConfig: DeviceConfig,
    uiStyleConfig: UIStyleConfig,
    localeConfig: LocaleConfig
) -> UIHostingController<some View> {
    let colorScheme = uiStyleConfig.style == .light ? ColorScheme.light : ColorScheme.dark
    let modifiedView = view
        .environment(\.locale, localeConfig.locale)
        .environment(\.colorScheme, colorScheme)
    return UIHostingController(rootView: modifiedView)
}

struct DeviceConfig {
    let viewConfig: ViewImageConfig
    let name: String
    // Example: iPhoneXPortrait = DeviceConfig(viewConfig: .iPhoneX(.portrait), name: "iPhoneX-Portrait")
}

struct UIStyleConfig {
    let style: UIUserInterfaceStyle
    let name: String
    // Example: light = UIStyleConfig(style: .light, name: "Light")
}

struct LocaleConfig {
    let locale: Locale
    let name: String
    // Example: english = LocaleConfig(locale: Locale(identifier: "en"), name: "EN")
}

struct SnapshotTestConfig {
    let deviceConfig: DeviceConfig
    let uiStyleConfig: UIStyleConfig
    let localeConfig: LocaleConfig
    
    var name: String {
        return "\(deviceConfig.name)-\(localeConfig.name)-\(uiStyleConfig.name)"
    }
}

func testSnapshots() {
    let configurations: [SnapshotTestConfig] = [
        .init(deviceConfig: .iPhoneXPortrait, uiStyleConfig: .light, localeConfig: .english),
        .init(deviceConfig: .iPhoneXLandscape, uiStyleConfig: .dark, localeConfig: .german)
    ]
    
    for config in configurations {
        assertSnapshot(
            of: hostingController,
            as: .image(on: config.deviceConfig.viewConfig),
            named: config.name
        )
    }
}

When I print config.name, I get the expected value (e.g., "iPhoneX-Portrait-EN-Light"). However, the snapshot image saved by the assertSnapshot function ends up being named something like testSnapshotsForView.iPhoneX-Portrait-EN-Light.png. I verified this in the verifySnapshot function, where the snapshot image file path includes the test method name as a prefix.

Here’s the code segment from the verifySnapshot function:

let snapshotFileUrl =
  snapshotDirectoryUrl
  .appendingPathComponent("\(testName).\(identifier)")
  .appendingPathExtension(snapshotting.pathExtension ?? "")

Console Output:

po snapshotFileUrl
file:///path-to-project/__Snapshots__/TestClass/testSnapshotsForView.iPhoneX-Portrait-EN-Light.png

CI/CD Pipeline Issue:
In addition, when running the tests in our CI/CD pipeline, the test fails with the following log:

testSnapshotsForView, failed - Snapshot "iPhoneX-Portrait-EN-Light" does not match reference.
/Users/gitlab-runner/.../TestClass.swift:85
assertSnapshot(of: hostingController)

testSnapshotsForView, failed - Snapshot "iPhoneX-Landscape-DE-Dark" does not match reference.

However, the image file names generated in the CI/CD environment include the test method name as a prefix, for example: testSnapshotsForView.iPhoneX-Portrait-EN-Light.png.

This mismatch between the expected and actual snapshot names is causing the pipeline to fail, as the snapshot references do not match the generated images.

My Questions:

1. Is it expected behavior for the snapshot image file to always include the test method name as a prefix in the filename?
2. Is there a way to customize the naming pattern of these snapshot files to avoid the test method name prefix and use just the configuration name?
3. Could there be another reason why the CI/CD pipeline is failing, aside from the naming discrepancy?

Any insights or guidance would be greatly appreciated!