Snapshots for SwiftUI's RoundedRectangle get rendered with vertical lines on the sides when style is .continuous

[vadimbelyaev]

Describe the bug I'm using SnapshotTesting in a SwiftUI iOS project. I wrap a SwiftUI view under test in a UIHostingControllerand then pass the hosting controller into the assertSnapshot method. However, I managed to reproduce the issue even by passing the SwiftUI view directly into the assertSnaphot.

When the view contains a RoundedRectangle with the style set to .continuous, its snapshots get rendered with vertical lines on both sides on the rounded rectangle. The color of the lines matches the border color.

These lines remain visible while the rectangle's height is relatively small. Once the rectangle's height grows beyond a certain value, the lines completely blend with the rectangle's side, and then result starts looking OK.

The view looks fine in previews and when running on a simulator, even when it's embedded in a UIHostingController, but its snaphots are produced with artifacts by some reason.

To Reproduce Here's a demo project that illustrates the issue: RoundedRectangleExperiment.zip

It's also available on GitHub: https://github.com/vadimbelyaev/RoundedRectangleExperiment/

A minimal view that can reproduce the issue is as small as this:

import SwiftUI

struct ExampleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 24, style: .continuous)
            .strokeBorder(Color.green)
            .frame(height: 48)
            .padding()
    }
}

And here's a test for it:

class RoundedRectangleExperimentTests: XCTestCase {
    func testExample() throws {
        let view = ExampleView()
        let hc = UIHostingController(rootView: view)
        hc.view.frame = CGRect(x: 0, y: 0, width: 350, height: 1200)
        assertSnapshot(matching: hc, as: .image, record: true)
    }
}

Expected behavior A RoundedRectangle with a .continuous style should render on snapshots without vertical lines on both sides. It should look the same as in previews or on a simulator.

Screenshots The sample project I provided contains a view with multiple rounded rectangles in it to demonstrate how the artifacts are rendered for the rectangles of different heights and that the rectangles with the .circular style don't have this issue:

Environment

• swift-snapshot-testing version 1.9.0
• Xcode 13.4
• Swift 5.6.1
• OS: iOS 15.5

Additional context N/A

[johnCbogil]

Seeing similar behavior, have you come across a solution @vadimbelyaev ?

[vadimbelyaev]

Seeing similar behavior, have you come across a solution @vadimbelyaev ?

Not yet, unfortunately.

[IgorRosocha]

We have just bumped into the same issue when snapshotting with Xcode 15, are there any known workarounds, instead of replacing .continuous with .circular?