Testing in Svelte

npm install -D vitest @testing-library/svelte @testing-library/jest-dom jsdom

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    include: ['src/**/*.test.{js,ts}'],
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/test-setup.js']
  }
});

// src/test-setup.js
import '@testing-library/jest-dom';

# Run tests
npm run test       # watch mode
npm run test -- --run  # single run

// src/lib/utils/math.js
export function calculateTotal(price, quantity) {
  return price * quantity;
}

export function formatCurrency(amount, currency = 'USD') {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount);
}

// src/lib/utils/math.test.js
import { describe, it, expect } from 'vitest';
import { calculateTotal, formatCurrency } from './math.js';

describe('calculateTotal', () => {
  it('multiplies price by quantity', () => {
    expect(calculateTotal(10, 5)).toBe(50);
  });

  it('returns 0 when quantity is 0', () => {
    expect(calculateTotal(99.99, 0)).toBe(0);
  });

  it('handles decimal prices', () => {
    expect(calculateTotal(9.99, 3)).toBeCloseTo(29.97);
  });
});

describe('formatCurrency', () => {
  it('formats USD by default', () => {
    expect(formatCurrency(1234.5)).toBe('$1,234.50');
  });
});

// src/lib/stores/counter.test.js
import { describe, it, expect, beforeEach } from 'vitest';
import { get } from 'svelte/store';
import { createCounter } from './counterStore.js';

describe('createCounter store', () => {
  let counter;

  beforeEach(() => {
    counter = createCounter(0, 1);
  });

  it('has the initial value', () => {
    expect(get(counter)).toBe(0);
  });

  it('increments', () => {
    counter.increment();
    expect(get(counter)).toBe(1);
  });

  it('decrements', () => {
    counter.increment();
    counter.decrement();
    expect(get(counter)).toBe(0);
  });

  it('resets to initial value', () => {
    counter.increment();
    counter.increment();
    counter.reset();
    expect(get(counter)).toBe(0);
  });
});

<!-- src/lib/Counter.svelte -->
<script>
  let count = 0;
</script>

<h2 data-testid="count">{count}</h2>
<button on:click={() => count++}>Increment</button>
<button on:click={() => count = 0}>Reset</button>

// src/lib/Counter.test.js
import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

describe('Counter component', () => {
  it('renders with initial count of 0', () => {
    const { getByTestId } = render(Counter);
    expect(getByTestId('count').textContent).toBe('0');
  });

  it('increments when button is clicked', async () => {
    const { getByText, getByTestId } = render(Counter);
    const button = getByText('Increment');

    await fireEvent.click(button);
    expect(getByTestId('count').textContent).toBe('1');

    await fireEvent.click(button);
    expect(getByTestId('count').textContent).toBe('2');
  });

  it('resets to 0 when Reset is clicked', async () => {
    const { getByText, getByTestId } = render(Counter);
    await fireEvent.click(getByText('Increment'));
    await fireEvent.click(getByText('Reset'));
    expect(getByTestId('count').textContent).toBe('0');
  });
});

// Testing a component with props
import { render } from '@testing-library/svelte';
import UserCard from './UserCard.svelte';

it('displays user name and role', () => {
  const { getByText } = render(UserCard, {
    props: { name: 'Alice Johnson', role: 'Admin' }
  });

  expect(getByText('Alice Johnson')).toBeInTheDocument();
  expect(getByText('Admin')).toBeInTheDocument();
});