Testing & Quality
32. Modern Testing Architecture: Vitest & Playwright
Build a rock-solid test suite: ultra-fast unit testing with Vitest, accessible component testing, and resilient browser-driven end-to-end testing with Playwright.
testing.ts
// vitest.config.ts & Test Harness
import { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [svelte({ hot: !process.env.VITEST })],
test: {
environment: 'jsdom',
include: ['src/**/*.test.ts'],
globals: true
}
});
// Sample Unit & Component Test
// import { render, screen, fireEvent } from '@testing-library/svelte';
// test('renders increment counter', async () => {
// render(Counter, { initial: 5 });
// const btn = screen.getByRole('button', { name: /increment/i });
// await fireEvent.click(btn);
// expect(screen.getByText('6')).toBeInTheDocument();
// });Modern Testing Architecture: Vitest & Playwright
A comprehensive testing pyramid combines instantaneous unit testing with Vitest, accessible component testing, and deterministic end-to-end browser automation with Playwright.
- Vitest: Native Vite-powered test runner sharing the exact same plugins, TypeScript configurations, and transforms with zero config duplication.
- Component Testing: Renders real Svelte 5 Runes components in JSDOM / Happy-DOM to assert accessibility roles, keyboard interactions, and event emissions.
- Playwright E2E: Drives real Chromium, Firefox, and WebKit browsers in headless mode to validate user flows and view transitions.
Integrated Test Runner Simulator Vitest + Playwright
Execute Full Test Harness:
Test Suite: 6 Specs (Unit, Component, E2E) IDLE
Press "Run Test Suite" to execute simulated Vitest & Playwright specs.