Testing Documentation

Master modern testing with Svelte 5 and vitest-browser-svelte. From basic component tests to advanced E2E patterns, this guide covers everything you need to build reliable, well-tested applications.

Sections

26+

Examples

100%

Coverage

A11y

Accessible

Search Documentation Ctrl + k

Documentation Guide

Complete testing documentation for Svelte 5 + vitest-browser-svelte. Start with any section below - all content is dynamically generated and always up-to-date.

Getting Started

Setup, installation, and your first test

Testing Patterns

Component, SSR, and server testing patterns

E2E Testing

End-to-end testing patterns and integration validation

API Reference

Complete testing utilities and helper functions

Migration Guide

Migrating from @testing-library/svelte

Best Practices

Advanced patterns and optimization techniques

CI/CD

Production-ready testing pipelines and automation

Troubleshooting

Common issues and solutions

About

About this project and its goals

LLM Documentation

Documentation for LLMs

We support the llms.txt convention for making documentation available to large language models and the applications that make use of them.

Available Formats

We provide documentation in multiple formats optimized for different context window sizes:

LLMs Index - A listing of all available documentation files
Full Documentation - Complete testing documentation with all examples and patterns
Medium Context - Compressed documentation for medium context window LLMs (like GPT-3.5, Claude Instant)
Small Context - Highly compressed essential patterns for small context window models

Special Formats

We also provide specialized formats for different use cases:

XML Format - Structured XML format optimized for systems like Claude that work well with structured content
API Reference - Core testing utilities and functions only
Code Examples - Collection of ready-to-use testing patterns
Directory - Complete directory of all available formats

Using the appropriate format helps LLMs provide more accurate assistance with less token usage, making interactions more efficient and effective.

LLMs Index Full Documentation Medium Context Small Context XML Format API Reference Code Examples Directory

📚 Complete Documentation

Jump to any section to master Svelte 5 testing with vitest-browser-svelte. Each guide includes practical examples, best practices, and real-world patterns.

📋 Copy-paste examples 🔍 Comprehensive API coverage ♿ Accessibility patterns ⚡ Performance tips

Quick Start

Jump right in with these essential testing patterns. Copy and paste these examples to get started immediately.

Essential Imports

Core imports for testing with vitest-browser-svelte

import { describe, expect, test, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest-browser/context';

Your First Test

Simple component test example

import { render } from 'vitest-browser-svelte';
import { page } from 'vitest-browser/context';
import { expect, test } from 'vitest';
import Button from './button.svelte';

test('renders button with correct text', async () => {
  render(Button, { props: { text: 'Click me' } });
  
  await expect.element(page.getByRole('button')).toHaveText('Click me');
});

Component Testing

Testing component interactions and events

import { render } from 'vitest-browser-svelte';
import { page } from 'vitest-browser/context';
import { expect, test, vi } from 'vitest';
import Button from './button.svelte';

test('calls on_click when clicked', async () => {
  const on_click = vi.fn();
  render(Button, { props: { on_click } });
  
  await page.getByRole('button').click();
  expect(on_click).toHaveBeenCalled();
});

SSR Testing

Server-side rendering tests

import { render } from 'svelte/server';
import { expect, test } from 'vitest';
import Page from './+page.svelte';

test('renders page content', () => {
  const { body } = render(Page);
  expect(body).toContain('Welcome');
});

Server Testing

Testing API routes and server functions

import { expect, test } from 'vitest';
import { GET } from './+server.ts';

test('returns correct response', async () => {
  const response = await GET();
  const data = await response.json();
  
  expect(data.success).toBe(true);
});

Core Testing Principles

Our testing philosophy emphasizes reliability, accessibility, and developer experience.

100% Test Coverage

Use the "Foundation First" approach - write all describe blocks first, then implement incrementally

Real Browser Testing

Test components in actual browser environment with vitest-browser-svelte

Accessibility First

Use semantic queries and test ARIA attributes for inclusive design

Performance Focused

Test loading states, animations, and user experience patterns

Documentation Sections

Comprehensive guides covering every aspect of testing with Svelte 5 and vitest-browser-svelte.

Getting Started

Installation & Setup

Sveltest comes pre-configured with everything you need for comprehensive testing:

pnpm install
pnpm test        # Run all tests
pnpm test:client # Component tests in browser
pnpm test:server # Server-side tests
pnpm test:ssr    # SSR tests

Project Structure

Tests are co-located with their source files:

*.svelte.test.ts - Component tests (browser)
*.ssr.test.ts - Server-side rendering tests
*.test.ts - API routes and utilities

Your First Test

Create a simple component test to verify your setup:

import { render } from 'vitest-browser-svelte';
import { page } from 'vitest-browser/context';
import { expect, test } from 'vitest';
import Button from './button.svelte';

test('renders button with correct text', async () => {
  render(Button, { props: { text: 'Click me' } });
  
  await expect.element(page.getByRole('button')).toHaveText('Click me');
});

Ready to Start Testing?

Explore our interactive examples and start building reliable, well-tested Svelte applications.

View Examples Component Library