# Sveltest Code Examples

> Ready-to-use testing patterns and code snippets for Svelte 5

## Basic Component Test

```typescript
import { describe, expect, test } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from '@vitest/browser/context';
import Button from './Button.svelte';

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

  test('handles click event', async () => {
    const onClick = vi.fn();
    render(Button, { text: 'Click me', onClick });
    await page.getByRole('button').click();
    expect(onClick).toHaveBeenCalled();
  });

  test('applies correct style variants', async () => {
    render(Button, { text: 'Click me', variant: 'primary' });
    await expect.element(page.getByRole('button')).toHaveClass('btn-primary');
  });
});
```

## Form Testing

```typescript
import { describe, expect, test } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from '@vitest/browser/context';
import LoginForm from './LoginForm.svelte';

describe('LoginForm', () => {
  test('validates required fields', async () => {
    const onSubmit = vi.fn();
    render(LoginForm, { onSubmit });

    // Submit without filling required fields
    await page.getByRole('button', { name: 'Submit' }).click();

    // Check for validation messages
    await expect.element(page.getByText('Email is required')).toBeVisible();
    await expect.element(page.getByText('Password is required')).toBeVisible();
    expect(onSubmit).not.toHaveBeenCalled();
  });

  test('submits form with valid data', async () => {
    const onSubmit = vi.fn();
    render(LoginForm, { onSubmit });

    // Fill form fields
    await page.getByLabel('Email').fill('test@example.com');
    await page.getByLabel('Password').fill('password123');

    // Submit form
    await page.getByRole('button', { name: 'Submit' }).click();

    // Check form submission
    expect(onSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: 'password123'
    });
  });
});
```

## State Testing with Runes

```typescript
import { describe, expect, test } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from '@vitest/browser/context';
import { untrack, flushSync } from 'svelte';
import Counter from './Counter.svelte';

describe('Counter', () => {
  test('increments counter value', async () => {
    render(Counter, { initialValue: 0 });

    // Check initial state
    await expect.element(page.getByText('Count: 0')).toBeVisible();

    // Increment counter
    await page.getByRole('button', { name: '+' }).click();

    // Check updated state
    await expect.element(page.getByText('Count: 1')).toBeVisible();
  });

  test('decrements counter value', async () => {
    render(Counter, { initialValue: 5 });

    // Check initial state
    await expect.element(page.getByText('Count: 5')).toBeVisible();

    // Decrement counter
    await page.getByRole('button', { name: '-' }).click();

    // Check updated state
    await expect.element(page.getByText('Count: 4')).toBeVisible();
  });
});
```

## SSR Testing

```typescript
import { describe, expect, test } from 'vitest';
import { render } from 'svelte/server';
import Card from './Card.svelte';

describe('Card SSR', () => {
  test('renders without errors', () => {
    expect(() => {
      render(Card, {
        title: 'Test Card',
        description: 'Card description
      });
    }).not.toThrow();
  });

  test('renders expected content for SEO', () => {
    const { body } = render(Card, {
      title: 'Test Card',
      description: 'Card description',
      imageSrc: '/test.jpg'
    });

    expect(body).toContain('Test Card');
    expect(body).toContain('Card description');
    expect(body).toContain('/test.jpg');
  });
});
```

## Mocking Examples

```typescript
import { describe, expect, test, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from '@vitest/browser/context';
import UserProfile from './UserProfile.svelte';

// Mock API module
vi.mock('$lib/api', () => ({
  fetchUserData: vi.fn().mockResolvedValue({
    name: 'Test User',
    email: 'test@example.com',
    role: 'admin'
  })
}));

describe('UserProfile', () => {
  test('displays user data from API', async () => {
    render(UserProfile, { userId: '123' });

    // Check loading state
    await expect.element(page.getByText('Loading...')).toBeVisible();

    // Wait for data to load
    await expect.element(page.getByText('Test User')).toBeVisible();
    await expect.element(page.getByText('test@example.com')).toBeVisible();
    await expect.element(page.getByText('admin')).toBeVisible();
  });
});
```