Do we need to make some changes in this plugin, because of https://github.com/sveltejs/kit/issues/5184 and https://github.com/sveltejs/kit/issues/4329 ?

Simply doing this in svelte config:

export default () => ({vite: {}})

and then in vite.config.js:

import { extractFromSvelteConfig } from 'vitest-svelte-kit';

let cfg = extractFromSvelteConfig();

cfg.then(console.log); // Just the plugins added by this package

export default cfg;

is giving syntax errors seemingly at random:

vite v2.9.9 building for production...
✓ 0 modules transformed.
[vite-plugin-svelte] /workspace/stackoverflow_import/src/routes/__layout.svelte:180:46 RightParenthesis is expected
file: /workspace/stackoverflow_import/src/routes/__layout.svelte:180:46
 178 |      height: 3px;
 179 |      border: 0;
 180 |      background-image: linear-gradient(to right, @primary-500, spin(@primary-500, -20), transparent);
                                                        ^
 181 |    }
 182 |    :global(.gradient-text) {
> /workspace/stackoverflow_import/src/routes/__layout.svelte:180:46 RightParenthesis is expected
    at error (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:17691:19)
    at Parser$1.error (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:17767:9)
    at Object.read_style [as read] (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:14456:20)
    at tag (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:16817:33)
    at new Parser$1 (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:17726:21)
    at parse$3 (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:17858:20)
    at compile (file:///workspace/stackoverflow_import/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.mjs:31871:17)
    at compileSvelte2 (file:///workspace/stackoverflow_import/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:321:20)
    at async Object.transform (file:///workspace/stackoverflow_import/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1727:25)
[!] Error: unfinished hook action(s) on exit:
(vite:load-fallback) load "/workspace/stackoverflow_import/.svelte-kit/runtime/client/start.js"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/__error.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/challenges/__layout.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/modules/__layout.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/about.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/api/verify/[slug].svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/challenges/[slug]/submit.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/challenges/index.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/graphql_test.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/help/ask.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/help/faq/[slug].svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/help/faq.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/help/index.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/help/questions/[slug].svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/home.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/index.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/login.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/modules/index.svelte"
(vite:load-fallback) load "/workspace/stackoverflow_import/src/routes/signup.svelte"

 ELIFECYCLE  Command failed with exit code 1.

I would like to ask if it would be possible to export the kitModuleEmulator-plugin?

I was thinking of using it in https://github.com/storybookjs/builder-vite instead of mocking the sveltekit-modules by myself.

Thank you!

Recently Sveltekit converted from using the Svelte config file to configure Vite to using the vite.config.js making loading your own vite config in this module non functional.

Please refer to this issue: https://github.com/sveltejs/kit/issues/5255

What I did

• Updated the plugin to read the vite.config.js file instead of the svelteConfig.kit.vite
• Updated dependencies in lock

Possible Issues

• Do we want to allow users to inline the vite config also?
• Don't think this solves this issue with stores

I don't know if this the correct place to put this problem (if it is not I apologize). When setting up a project with SvelteKit where its tsconfig.json contains "extends": "./.svelte-kit/tsconfig.json", as it is present in the documentation, it breaks the tests when running vitest. If I delete this line the error does not happen.

More specifically the error below when running vitest --run. When there are several tests, only one of them fails with this error and the others pass:

vitest.config.ts

import { extractFromSvelteConfig } from 'vitest-svelte-kit';

export default extractFromSvelteConfig();

Is there something missing, or is this current limitation?

Currently when using this with typescript.

▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json"

    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json"
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Further if you use ts instead of js for the tests you get the following error and the tests don't run.

 FAIL  src/lib/button/button.test.ts [ src/lib/button/button.test.ts ]
Error: failed to resolve "extends":"./.svelte-kit/tsconfig.json" in <Project path>/tsconfig.json
 ❯ resolveExtends node_modules/vite/dist/node/chunks/dep-9c153816.js:22266:11
 ❯ parseExtends node_modules/vite/dist/node/chunks/dep-9c153816.js:22250:34
 ❯ parse$e node_modules/vite/dist/node/chunks/dep-9c153816.js:22201:24
 ❯ async loadTsconfigJsonForFile node_modules/vite/dist/node/chunks/dep-9c153816.js:22547:24
 ❯ async transformWithEsbuild node_modules/vite/dist/node/chunks/dep-9c153816.js:22380:36
 ❯ async TransformContext.transform node_modules/vite/dist/node/chunks/dep-9c153816.js:22468:32
 ❯ async Object.transform node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30
 ❯ async doTransform node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29

Hi, first of all, thanks for the neat tool! Encountered ReferenceError: describe is not defined error while running a few tests inspired from the Svelte Vitest example which is using top level hooks.

import { cleanup, fireEvent, render, screen } from '@testing-library/svelte'
import Hello from '../components/Hello.svelte'

describe('Hello.svelte', () => {

When importing the accurate hooks, like in the vitest-svelte-kit example, tests work. Is it possible to support top level hooks ?

The newest SvelteKit has 'vite' placed on a higher level, not within the 'kit' configuration. This PR fixes that, while allowing for older configurations to keep working as well.

https://kit.svelte.dev/docs/configuration

Hi! Thanks for your work on this package @nickbreaton! I'm using this package with my vitest.config.js but I have existent configuration here:

{
  plugins: [svelte({ hot: !process.env.VITEST }), Icons({ compiler: 'svelte' })],
  test: {
    watch: false,
    clearMocks: true,
    environment: 'jsdom',
    include: ['test/**/*.ts'],
    exclude: [
      'node_modules',
      'dist',
      '.idea',
      '.git',
      '.cache',
      'test/__mock__/**/*.ts',
      '.coverage',
      '.svelte-kit',
    ],
    deps: {
      inline: ['@splidejs/svelte-splide', 'msw', /@sentry/],
    },
    coverage: { reporter: ['lcovonly'], reportsDirectory: '.coverage' },
  },
}

I would like to be able to provide this config along with the one provided by the package to Vitest. Would this be possible? Thanks in advance!

I am trying to test a graphql call performed with @urql/svelte but, during the test, every call returns a [Network] fetch is not defined error; so, I would like to add the @rollup/plugin-graphql vite plugin to the configuration as shown here.

Is there a way to add a custom plugin to this vite.config.js file:

import { extractFromSvelteConfig } from "vitest-svelte-kit"
export default extractFromSvelteConfig()

BTW, as the graphql call works without issues when running the sveltekit application (both in SSR as in the client), so I am not sure if this is a problem of a missing plugin or a problem with vitest-svelte-kit

Helloo!

As described in this Vite issue, there is a problem on Windows to get the file with ES modules

There is an error like this:

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Solution is easy, one liner,

import {pathToFileURL} from 'url'

const resolvedConfigFile = path.resolve(process.cwd(), "svelte.config.js");
const file = pathToFileURL(resolvedConfigFile).href;

What has been done:

• Installed @testing-library/jest-dom package
• Updated Vitest version (the older version doesn't catch the updated matchers types)
• Moved cleanup and the matchers extending to a separate file (setupTests.ts). Also changed beforeEach to afterEach for the cleanup (to match the example in the @testing-library/svelte docs)
• Overrode globals and setupFiles fields in the tests' setup (in svelte.config.js file)
• Used toBeInTheDocument matcher instead of toBeDefined to check the changed and TypeScript support
• Used getByText from the imported screen object instead of the one from the render result (here is why)
• Fixed comments indentation in tsconfig.json
• Added a note about @testing-library/jest-dom to README.md and fixed a typo out there