[Bug]: Components using Superforms cannot be tested

[Stadly]

Describe the bug

If you have a component using Superforms, testing it with @storybook/addon-vitest does not work, both when running the tests on the command line and from the Storybook UI. In the interactions panel, things work as expected.

Reproduction link

https://stackblitz.com/edit/github-mvcrdt2n?file=src%2Fstories%2FButton.svelte

Reproduction steps

Using the provided StackBlitz:

1. Open https://stackblitz.com/edit/github-mvcrdt2n?file=src%2Fstories%2FButton.svelte
2. Run the tests either from the UI or using vitest run.

Manual reproduction:

1. npm i -D sveltekit-superforms
2. Add import to one of your components for which you have stories with play functions: import { superForm } from "sveltekit-superforms";
3. Initialize Superforms in the script tag: const form = superForm({ foo: "" });
4. Run your story tests

System

│  System:
│  OS: Linux 5.0 undefined
│  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
│  Shell: 1.0 - /bin/jsh
│  Binaries:
│  Node: 20.19.1 - /usr/local/bin/node
│  Yarn: 1.22.19 - /usr/local/bin/yarn
│  npm: 10.8.2 - /usr/local/bin/npm <----- active
│  pnpm: 8.15.6 - /usr/local/bin/pnpm

Additional context

No response

[dosubot]

This is a limitation with Storybook's mock of SvelteKit's enhance function: it doesn't call the submit callback that Superforms expects, which breaks form handling in tests and can lead to the Invalid value used as weak map key error you see with Vitest. The error happens because Storybook's hooks system uses a WeakMap keyed by functions, and if the mock doesn't provide the right callback, Superforms ends up passing an invalid key (like a primitive) to the WeakMap, causing the crash.

A workaround is to patch the mock enhance function in @storybook/sveltekit so it dispatches a storybook:enhance event with the form element, submit function, and event details. This lets Superforms work as expected in Storybook tests. You can do this with patch-package or a similar tool. Here’s an example patch you can apply to node_modules/@storybook/sveltekit/src/mocks/app/forms.ts:

-import function enhance(form: HTMLFormElement) {
-  const listener = (e: Event) => {
-    e.preventDefault();
-    const event = new CustomEvent('storybook:enhance');
-    window.dispatchEvent(event);
-  };
-  form.addEventListener('submit', listener);
-  return {
-    destroy() {
-      form.removeEventListener('submit', listener);
-    },
-  };
+import type { SubmitFunction } from '@sveltejs/kit';
+export function enhance(formElement: HTMLFormElement, submitFunction: SubmitFunction) {
+  const listener = (e: Event) => {
+    const event = new CustomEvent('storybook:enhance', {
+      detail: {
+        formElement,
+        submitFunction,
+        submitEvent: e
+      }
+    });
+    window.dispatchEvent(event);
+  };
+  formElement.addEventListener('submit', listener);
+  return {
+    destroy() {
+      formElement.removeEventListener('submit', listener);
+    }
+  };
}

This patch has been used successfully by others to enable Superforms testing in Storybook with Vitest. You can find more details and discussion in this issue.

Make sure all your Storybook, SvelteKit, and Vitest dependencies are up to date, and remove any obsolete packages like @storybook/svelte-vite or storybook-builder-vite to avoid compatibility issues. This workaround is not officially supported and may break in future Storybook releases, so keep an eye on the linked issue for updates.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Stadly]

I think dosubot is far off, as the issue I'm describing has nothing to do with the enhance function.

[Stadly]

I was able to get this to work by mocking the page store. Would it be possible to improve the error message for this case?

parameters: { sveltekit_experimental: { stores: { page: {} } } }

[Stadly]

Related issue: #20999