Testing Guide

Comprehensive testing strategies for the Refresh App Web.

Test Setup

Framework: Vitest 3.2 Component Testing: @testing-library/svelte 5.2 Environment: jsdom (client), node (server)

Configuration: vite.config.ts

test: {
	workspace: [
		{
			name: 'client',
			environment: 'jsdom',
			include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
			exclude: ['src/lib/server/**'],
			setupFiles: ['./vitest-setup-client.ts']
		},
		{
			name: 'server',
			environment: 'node',
			include: ['src/**/*.{test,spec}.{js,ts}'],
			exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
		}
	];
}

Running Tests

pnpm test              # Run all tests once
pnpm test:unit         # Watch mode
pnpm test -- --coverage  # With coverage

Component Testing

Example test file: Button.svelte.test.ts

import { render, screen, fireEvent } from '@testing-library/svelte';
import { describe, it, expect, vi } from 'vitest';
import Button from './Button.svelte';

describe('Button', () => {
	it('renders with text', () => {
		render(Button, { props: { text: 'Click me' } });
		expect(screen.getByText('Click me')).toBeInTheDocument();
	});

	it('calls onclick when clicked', async () => {
		const handleClick = vi.fn();
		render(Button, { props: { onclick: handleClick } });

		const button = screen.getByRole('button');
		await fireEvent.click(button);

		expect(handleClick).toHaveBeenCalledOnce();
	});

	it('is disabled when prop is true', () => {
		render(Button, { props: { disabled: true } });
		expect(screen.getByRole('button')).toBeDisabled();
	});
});

Server-Side Testing

Test load functions:

import { describe, it, expect, beforeEach } from 'vitest';
import type { PageServerLoad } from './$types';

describe('Dashboard page', () => {
	it('redirects when not authenticated', async () => {
		const mockLocals = { auth: async () => null };

		await expect(load({ locals: mockLocals })).rejects.toThrow('redirect');
	});

	it('loads user data when authenticated', async () => {
		const mockSession = {
			user: { id: '1', name: 'Test', activeTenant: { id: 't1' } }
		};
		const mockLocals = { auth: async () => mockSession };

		const result = await load({ locals: mockLocals });

		expect(result.user).toEqual(mockSession.user);
	});
});

Best Practices

1. Test user behavior, not implementation

2. Use semantic queries (getByRole, getByLabelText)

3. Mock external dependencies

4. Keep tests isolated

5. Run tests before committing

Related Documentation

• Storybook Guide

• Code Standards

• Local Development

---

Last updated: October 2025