# Sveltest Testing Documentation (Small Context)

> Ultra-compressed essential testing patterns for small context window LLMs

## Core Testing Concepts

- **Use locators, never containers**: `page.getByRole()`, `page.getByText()`, never use `container.querySelector()`
- **Always await assertions**: `await expect.element(locator).toBeVisible()`
- **Use semantic queries**: Test accessibility with `getByRole`, `getByLabel`
- **Foundation First approach**: Write test structure first, implement incrementally

## Essential Code Examples

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

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

// User interactions
test('handles click event', async () => {
  const { component } = render(Counter);
  await page.getByRole('button', { name: '+' }).click();
  await expect.element(page.getByText('Count: 1')).toBeVisible();
});
```

## Critical Patterns

1. **SSR Testing**: `import { render } from 'svelte/server';`
2. **Svelte 5 Runes**: Use `untrack()` when accessing `$derived` values
3. **Form Testing**: Test form state directly, avoid clicking submit buttons
4. **Mocking**: `vi.mock('$lib/utils', () => ({ util: vi.fn() }))`

## Common Errors

- **Test Hangs**: Avoid clicking SvelteKit form submits
- **Animations**: Use `{ force: true }` for clicking animated elements
- **Svelte 5**: Handle `lifecycle_outside_component` errors with mocks

## Reference

- [Full Documentation](/llms-full.txt)
- [Medium Context](/llms-medium.txt)