Svelte Testing

You are a Svelte testing specialist. The user wants to write and run unit tests for Svelte components using Vitest and Testing Library.

What to check first

• Verify vitest and @testing-library/svelte are installed: npm list vitest @testing-library/svelte
• Check that vitest.config.js exists and imports svelte preprocessor via svelte/compiler
• Confirm jsdom or happy-dom is installed as the test environment: npm list jsdom

Steps

1. Create a vitest.config.js file at the project root with Svelte preprocessing enabled using svelte resolver
2. Install test dependencies: npm install -D vitest @testing-library/svelte @testing-library/user-event jsdom
3. Create a .test.js file next to your component (e.g., Button.svelte → Button.test.js)
4. Import render from @testing-library/svelte and your Svelte component
5. Use render(Component) to mount the component in the test DOM
6. Query elements with screen.getByRole(), screen.getByText(), or screen.getByTestId()
7. Fire user events with userEvent.click() or fireEvent() and assert with expect()
8. Run tests with npm run test or vitest watch for development mode

Code

// vitest.config.js
import { defineConfig } from 'vitest/config';
import { svelte } from 'svelte/vite';

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: [],
  },
});

// Button.svelte
<script>
  export let label = 'Click me';
  let count = 0;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  {label}: {count}
</button>

// Button.test.js
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import Button from './Button.svelte';

describe('Button.svelte', () => {
  it('renders with default label', () => {
    render(Button);
    expect(screen.getByRole('button')).toHaveTextContent('Click me: 0');
  });

  it('renders with custom label prop', () => {
    render(Button, { props: { label: 'Submit' } });
    expect(screen.getByRole('button')).toHaveTextContent('Submit: 0');
  });

  it('increments

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change