Warning This svelte adder is no longer maintained.

You can now create a new SvelteKit project with Vitest using npm create svelte@latest.

Features like adding @testing-library/svelte or msw, please check davipon/svelte-component-test-recipes

svelte-add-vitest

npx @preset/cli davipon/svelte-add-vitest

❓ What is this?

This is a preset to add Vitest to your SvelteKit project.

🔋 Batteries-included

• Use the APIs globally like Jest
• In-source testing
• Native code coverage via c8
• Support component test using @testing-library/svelte
• Extend Vitest matchers with @testing-library/jest-dom and TypeScript support
• Mock Service Worker (MSW) let you mock both REST and GraphQL network requests

🛠 Usage

You must start with a fresh copy of the official SvelteKit template, which is currently created by running this command:

npm create svelte my-app

⚠️ Make sure to choose Skeleton Project

Once that is set up, run this command in your project directory to set up Vitest:

npx @preset/cli davipon/svelte-add-vitest --ts --msw --example

🎭 Playwright compatible

If you have playwright installed, make sure to configure it to only run tests using playwright annotations. For instance, the playwright test is placed under tests in SvelteKit skeleton project. You need to specify it after adding Vitest:

//playwright.config.js

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  webServer: {
    command: 'npm run build && npm run preview',
    port: 4173
  },
  // Add testMatch here
  testMatch: 'tests/**/*.js',
};

export default config;

⚙️ Options

📄 License

MIT