Skip to content
mkra.dev

Testing

Prerequisites

Minimal testing prerequisites

Dependencies.

Installing dependencies
# Test Suites
pnpm i -D @playwright/test vitest @vitest/ui vitest-tsconfig-paths
# Playwright Browser Dependencies
pnpm dlx playwright install # npx playwrigth install
# Testing Library
pnpm i -D jsom @testing-library/svelte @testling-library/user-event @testing-library/jest-dom

Uni Testing - Vitest and Testing Library Svelte

vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'
import tsconfigPaths from 'vitest-tsconfig-paths'


export default defineConfig({
 plugins: [sveltekit(), tsconfigPaths()],
 test: {
  plugins: [tsconfigPaths()],
  globals: true,
  reporters: 'verbose',
  environment: 'jsdom',
  restoreMocks: true,
  includeSource: ['src/**/*.{test,spec}.{js,ts}'],
  setupFiles: ['./src/test.config.ts'],
  coverage: {
   exclude: ['./src/test.config.ts']
  },
  exclude: [...configDefaults.exclude, 'tests']
 }
})
src/test.config.ts
import { expect, afterEach } from 'vitest'
import { cleanup } from '@testing-library/svelte'
import '@testing-library/jest-dom'
import * as matchers from '@testing-library/jest-dom/matchers'
expect.extend(matchers) // extend jest matchers
afterEach(cleanup) // cleanup DOM after each test

Enabling Global imports for unit tests

tsconfig.json
{
 "compilerOptions": {
  "types": ["vitest/globals"]
 }
}

or use unplugin-auto-import install pnpm install -D unplugin-auto-import/vite

vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'
import AutoImport from 'unplugin-auto-import/vite'


export default defineConfig({
 plugins: [
  sveltekit(),
  AutoImport({
   imports: ['vitest'],
   dts: true // generate TypeScript declaration
  })
 ],
 test: {
  // ... rest of the options
 }
})

Integration Testing - Playwright

playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'
const config: PlaywrightTestConfig = {
 webServer: {
  command: 'pnpm run build && pnpm run preview',
  port: 4173
 },
 fullyParallel: true,
 reporter: 'html',
 testDir: 'tests',
 testMatch: /(.+\.)?(test|spec)\.[jt]s/
}
export default config

Additional ignored files

.gitignore
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
test-results
playwright-report

External Links to read more about configuration Vitest Config Playwright Config

Testing in Action

TODO! Create a Simple Svelte App

Hooking into Svelte

src/test.config.ts
/* eslint-disable @typescript-eslint/no-empty-function */
import matchers from '@testing-library/jest-dom/matchers'
import { expect, vi } from 'vitest'
expect.extend(matchers)
vi.mock('$app/environment', () => ({ browser: true }))
vite.config.ts
import { configDefaults, defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'


export default defineConfig({
 plugins: [svelte({ hot: !process.env.VITEST })],
 define: {
  'import.meta.vitest': 'undefined'
 },
 test: {
  globals: true,
  environment: 'jsdom',
  includeSource: ['src/**/*.{test,spec}.{js,ts,svelte}'],
  setupFiles: ['./src/test.config.ts'],
  coverage: {
   exclude: ['./src/test.config.ts']
  },
  exclude: [...configDefaults.exclude, 'tests']
 }
})

Hooking into SvelteKit

src/test.config.ts
import matchers from '@testing-library/jest-dom/matchers'
import { expect, vi } from 'vitest'
import { readable } from 'svelte/store'
import type * as environments from '$app/environment'
import type * as navigation from '$app/navigation'
import type * as stores from '$app/stores'
import type { Navigation, Page } from '@sveltejs/kit'
expect.extend(matchers)


vi.mock('$app/environment', (): typeof environments => ({
 browser: true,
 dev: true,
 building: false,
 version: 'any'
}))


// Mock SvelteKit runtime module $app/navigation
vi.mock('$app/navigation', (): typeof navigation => ({
 afterNavigate: () => {},
 beforeNavigate: () => {},
 disableScrollHandling: () => {},
 goto: () => Promise.resolve(),
 invalidate: () => Promise.resolve(),
 invalidateAll: () => Promise.resolve(),
 preloadData: () => Promise.resolve(),
 preloadCode: () => Promise.resolve()
}))


// Mock SvelteKit runtime module $app/stores
vi.mock('$app/stores', (): typeof stores => {
 const getStores: typeof stores.getStores = () => {
  const navigating = readable<Navigation | null>(null)
  const page = readable<Page>({
   url: new URL('http://localhost'),
   params: {},
   route: {
    id: null
   },
   status: 200,
   error: null,
   data: {},
   form: undefined
  })
  const updated = {
   subscribe: readable(false).subscribe,
   check: async () => false
  }


  return { navigating, page, updated }
 }


 const page: typeof stores.page = {
  subscribe(fn) {
   return getStores().page.subscribe(fn)
  }
 }
 const navigating: typeof stores.navigating = {
  subscribe(fn) {
   return getStores().navigating.subscribe(fn)
  }
 }
 const updated: typeof stores.updated = {
  subscribe(fn) {
   return getStores().updated.subscribe(fn)
  },
  check: async () => false
 }


 return {
  getStores,
  navigating,
  page,
  updated
 }
})
src/test.config.ts
import { expect, afterEach, vi } from 'vitest'
import { cleanup, configure } from '@testing-library/svelte'
import '@testing-library/jest-dom'
import * as matchers from '@testing-library/jest-dom/matchers'
import type { Navigation, Page } from '@sveltejs/kit'
import { readable } from 'svelte/store'
import type * as environment from '$app/environment'
import type * as stores from '$app/stores'
import type * as navigation from '$app/navigation'


expect.extend(matchers)
afterEach(cleanup)


configure({
 asyncUtilTimeout: 1500
})


// Mock SvelteKit runtime module $app/environment
vi.mock('$app/environment', (): typeof environment => ({
 browser: false,
 dev: true,
 building: false,
 version: 'any'
}))


// Mock SvelteKit runtime module $app/navigation
vi.mock('$app/navigation', (): typeof navigation => ({
 afterNavigate: () => {},
 onNavigate: () => {},
 beforeNavigate: () => {},
 disableScrollHandling: () => {},
 goto: () => Promise.resolve(),
 invalidate: () => Promise.resolve(),
 invalidateAll: () => Promise.resolve(),
 preloadData: () => Promise.resolve(),
 preloadCode: () => Promise.resolve()
}))


// Mock SvelteKit runtime module $app/stores
vi.mock('$app/stores', (): typeof stores => {
 const getStores: typeof stores.getStores = () => {
  const navigating = readable<Navigation | null>(null)
  const page = readable<Page>({
   url: new URL('http://localhost'),
   params: {},
   route: {
    id: null
   },
   status: 200,
   error: null,
   data: {},
   form: undefined
  })
  const updated = {
   subscribe: readable(false).subscribe,
   check: async () => false
  }


  return { navigating, page, updated }
 }


 const page: typeof stores.page = {
  subscribe(fn) {
   return getStores().page.subscribe(fn)
  }
 }
 const navigating: typeof stores.navigating = {
  subscribe(fn) {
   return getStores().navigating.subscribe(fn)
  }
 }
 const updated: typeof stores.updated = {
  subscribe(fn) {
   return getStores().updated.subscribe(fn)
  },
  check: async () => false
 }


 return {
  getStores,
  navigating,
  page,
  updated
 }
})

TODO explain snippets