Issues with tests with new SvelteKit project

[francismanansala]

Hi! I'm new to Svelte and I wanted to give it a try. I'm running into issues with tests with my project. I want to have my tests without running into any errors.
Here's my repo: https://github.com/francismanansala/nss

The unit tests run (npm run test:unit -- --run) into a SSR error when trying to use wrapDynamicImport

[vite] (ssr) Error when evaluating SSR module /node_modules/@sveltejs/kit/src/runtime/server/index.js: Cannot read properties of undefined (reading 'wrapDynamicImport')

I also can't get my storybook tests to run with my unit tests. When I attempt to do this, I get errors related to P4.renderToCanvas is not a function

Has anyone run into these issues and resolved them?

[edited]
Solution to my issue was to configure the tests properly.

package.json dependencies

  "devDependencies": {
    "@chromatic-com/storybook": "^4.0.1",
    "@eslint/compat": "^1.2.5",
    "@eslint/js": "^9.18.0",
    "@fontsource/fira-mono": "^5.0.0",
    "@neoconfetti/svelte": "^2.0.0",
    "@playwright/test": "^1.49.1",
    "@storybook/addon-a11y": "^9.0.14",
    "@storybook/addon-docs": "^9.0.14",
    "@storybook/addon-svelte-csf": "^5.0.4",
    "@storybook/addon-vitest": "^9.0.14",
    "@storybook/sveltekit": "^9.0.14",
    "@sveltejs/adapter-auto": "^6.0.0",
    "@sveltejs/kit": "^2.22.2",
    "@sveltejs/vite-plugin-svelte": "^5.0.0",
    "@tailwindcss/forms": "^0.5.9",
    "@tailwindcss/typography": "^0.5.15",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^22",
    "@vitest/browser": "^3.2.3",
    "drizzle-kit": "^0.30.2",
    "eslint": "^9.18.0",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-storybook": "^9.0.14",
    "eslint-plugin-svelte": "^3.0.0",
    "globals": "^16.0.0",
    "mdsvex": "^0.12.3",
    "playwright": "^1.53.0",
    "prettier": "^3.4.2",
    "prettier-plugin-svelte": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "storybook": "^9.0.14",
    "svelte": "^5.25.0",
    "svelte-check": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.0.0",
    "typescript-eslint": "^8.20.0",
    "vite": "^6.2.6",
    "vite-plugin-devtools-json": "^0.2.0",
    "vitest": "^3.2.4",
    "vitest-browser-svelte": "^0.1.0"
  },
  "dependencies": {
    "@inlang/paraglide-js": "^2.0.0",
    "@node-rs/argon2": "^2.0.2",
    "@oslojs/crypto": "^1.0.1",
    "@oslojs/encoding": "^1.1.0",
    "drizzle-orm": "^0.40.0",
    "postgres": "^3.4.5",
    "tailwind-variants": "^1.0.0"
  }

.storybook/vitest.setup.ts

import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
import { setProjectAnnotations } from '@storybook/svelte-vite'
import * as projectAnnotations from './preview'

// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])

vite.config.ts

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { paraglideVitePlugin } from '@inlang/paraglide-js'
import devtoolsJson from 'vite-plugin-devtools-json'
import tailwindcss from '@tailwindcss/vite'
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

const dirname =
  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
    devtoolsJson(),
    paraglideVitePlugin({
      project: './project.inlang',
      outdir: './src/lib/paraglide',
    }),
  ],
  test: {
    projects: [
      {
        extends: true,
        plugins: [storybookTest({ configDir: path.join(dirname, '.storybook') })],
        optimizeDeps: {
          include: ['@storybook/svelte-vite', '@storybook/addon-a11y'],
        },
        test: {
          name: 'storybook',
          browser: {
            enabled: true,
            headless: true,
            provider: 'playwright',
            instances: [{ browser: 'chromium' }],
          },
          setupFiles: ['./.storybook/vitest.setup.ts'],
        },
      },
      {
        extends: './vite.config.ts',
        test: {
          name: 'client',
          environment: 'browser',
          browser: {
            enabled: true,
            headless: true,
            provider: 'playwright',
            instances: [{ browser: 'chromium' }],
          },
          include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
          exclude: ['src/lib/server/**'],
          setupFiles: ['./vitest-setup-client.ts'],
        },
      },
      {
        extends: './vite.config.ts',
        test: {
          name: 'server',
          environment: 'node',
          include: ['src/**/*.{test,spec}.{js,ts}'],
          exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
        },
      },
    ],
  },
})

[francismanansala]

I found a way to resolve the error for the unit test by adding the headless config for my client tests: https://github.com/francismanansala/nss/commit/81ce0046b0514f9f01340e701ae3dbd36ea92ea0

I'm still looking to have storybook tests run with my unit tests.

[francismanansala]

I figured it out. I didn't setup storybook test properly. I did it with this commit: https://github.com/francismanansala/nss/commit/f9b02c371e0464c5d4e08a0665e0b1385d6dea82