Is it possible to UI Test individual Swift UI components?

Question

I am super new to Swift and SwiftUI and I have started a new project using SwiftUI. I have some experience in other component based libraries for the web and I wanted a way to use the same pattern for iOS development.

Is there a way to ui test individual components in SwiftUI? For example, I have created a Map component that accepts coordinates and renders a map and I want to test this map individually by making the app immediately render the component. Here is my code and test code at the moment:

// App.swift (main)
// Map is not rendered yet

@main
struct PicksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

// MyMap.swift
struct MyMap: View {

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 25.7617,
            longitude: 80.1918
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 10,
            longitudeDelta: 10
        )
    )

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MyMap_Previews: PreviewProvider {
    static var previews: some View {
        MyMap()
    }
}

// MyMapUITests.swift
class MyMapUITests: XCTestCase {
    func testMapExists() throws {
        let app = XCUIApplication()
        app.launch()

        let map = app.maps.element
        XCTAssert(map.exists, "Map does not exist")
    }
}

Is it possible to tell UI Test framework to only test one component instead of launching the entire app and making me navigate between each view before I am able to get to my view?

For example, in my case, there is going to be a login view when the app opens for the first time (which is every time from perspective of ui testing) and the map view can be located inside the app somewhere. I want to be able to test only the map view without testing end-to-end user experience.

Answer 1

One approach you could take is to transform your app into a catalog one if some environment variables are found. For this you'll have to keep a fixed collection of views to use as the root of the app:

@main
struct PicksApp: App {
    static let viewBuilders: [String: () -> AnyView] = [
        "ContentView": { AnyView(ContentView()) },
        "MyMap": { AnyView(MyMap()) }]
    
    var body: some Scene {
        WindowGroup {
            if let viewName = ProcessInfo().customUITestedView,
               let viewBuilder = Self.viewBuilders[viewName] {
                viewBuilder()
            } else {
                AnyView(ContentView())
            }
        }
    }
}

Here's the ProcessInfo helper method:

extension ProcessInfo {
    var customUITestedView: String? {
        guard environment["MyUITestsCustomView"] == "true" else { return nil }
        return environment["MyCustomViewName"]
    }
}

With the above changes, the UI test needs only two more lines of code - the enviroment preparation:

func testMapExists() throws {
    let app = XCUIApplication()
    app.launchEnvironment["MyUITestsCustomView"] = "true"
    app.launchEnvironment["MyCustomViewName"] = "MyMap"
    app.launch()
    
    let map = app.maps.element
    XCTAssert(map.exists, "Map does not exist")
}