Recommended patterns for testing components that rely on remote functions?

[brendan-morin]

Is the only option e2e tests, or are there other patterns that we could use? E2e tests do work great but they're a bit slow and they seem better for testing specific usage of a component rather than general component functionality, meaning they're not super well suited for e.g. TDD.

[brendan-morin]

Linking relevant issue here: sveltejs/kit#14796

[spences10]

Oh! Sorry didn't see this!

I use a helper file approach see here: https://github.com/spences10/scottspence.com/blob/096bc4d8791b156817956760fc3218a28c0a90da/src/lib/analytics/live-analytics.helpers.ts

[brendan-morin]

Got it! So for the most part you're following the functional core/imperative shell approach for testing remote functions themselves. That part makes sense, but I suppose I'm more specifically wondering what patterns might be recommended for components that rely on remote functions.

Right now the best I could come up with was to just dependency inject any remote functions so they could be mocked, but that still leaves the integration essentially untested (save for e2e). But perhaps that's the best we can do. Basically I feel like I just end up recycling this pattern everywhere:

<script lang="ts">
    import { createItem } from "$lib/items.remote";

    let {
        form = createItem,
        onError = () => {},
        onSuccess = () => {},
    }: {
        form?: typeof createItem;
        onError?: () => void;
        onSuccess?: () => void;
    } = $props();
</script>

<form
    {...form.enhance(async ({ submit }) => {
        // Override enhance so we don't clear form on failure
        // and can perform any custom onSuccess
        await submit();

        if (form.result?.success) {
            onSuccess();
        } else {
            onError();
        }
    })}
>
    ...
</form>

The downside to this is that if the component relies on any e.g. reactive functionality from the remote function, it isn't well tested with this approach, and mocking the full range of RF functionality feels like a rabbit hole.