TypeError: Cannot read properties of undefined (reading '$set')

[peter-bab]

Description When testing a form which uses formsnap & superforms the test fails with an error as soon as I try to submit the form (in browser everything works fine). Tried with both SPA: true mode and without it.

Relevant dependencies:

  "sveltekit-superforms": "^2.21.1",
  "formsnap": "^2.0.0-next.1",
  "@sveltejs/kit": "^2.9.0",
  "svelte": "^5.0.0",

Tested form:

<script lang="ts">
  import * as Form from "$lib/components/ui/form/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { formSchema, type FormSchema } from "./schema";
  import {
   type SuperValidated,
   type Infer,
   superForm,
  } from "sveltekit-superforms";
  import { zodClient } from "sveltekit-superforms/adapters";
  
  export let data: SuperValidated<Infer<FormSchema>>;
  
  const form = superForm(data, {
    validators: zodClient(formSchema),
  }); 
  
  const { form: formData, enhance } = form;
 </script>
  
 <form method="POST" use:enhance>
  <Form.Field {form} name="username">
   <Form.Control>
    {#snippet children({ props })}
     <Form.Label>Username</Form.Label>
     <Input {...props} bind:value={$formData.username} />
    {/snippet}
   </Form.Control>
   <Form.Description>This is your public display name.</Form.Description>
   <Form.FieldErrors />
  </Form.Field>
  <Form.Button>Submit</Form.Button>
 </form>

Error:

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Cannot read properties of undefined (reading '$set')
 ❯ Module.applyAction node_modules/@sveltejs/kit/src/runtime/client/client.js:1990:8
    1988|   _goto(result.location, { invalidateAll: true }, 0);
    1989|  } else {
    1990|   /** @type {Record<string, any>} */
       |        ^
    1991|   root.$set({
    1992|    // this brings Svelte's view of the world in line with SvelteKit's
 ❯ validationResponse node_modules/sveltekit-superforms/dist/client/superForm.js:1396:62
 ❯ Timeout._onTimeout node_modules/sveltekit-superforms/dist/client/superForm.js:1125:34
 ❯ listOnTimeout node:internal/timers:569:17
 ❯ processTimers node:internal/timers:512:7

MRE

All the code with test itself is available here: https://github.com/peterbabinec/svelte-form/blob/main/src/routes/settings/page.test.ts Just clone it, install and run the test.

[ciscoheat]

You need to mock the SvelteKit environment to make it work, see if this helps: https://github.com/ciscoheat/sveltekit-superforms/issues/394#issuecomment-2041502593

[peter-bab]

@ciscoheat yes I checked that issue and copy pasted mocking from your test but unfortunately still I get the same error and I am not sure how to mock / resolve it :face_with_diagonal_mouth: The only "workaround" is to pass applyAction: false to superForm() options but that's not optimal for obvious reasons.