Unit tests with Vitest¶

import adapter from '@sveltejs/adapter-auto';
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
    plugins: [
        sveltekit({
            compilerOptions: {
                // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
                runes: ({ filename }) =>
                    filename.split(/[/\\]/).includes('node_modules') ? undefined : true
            },
            adapter: adapter()
        }),
        svelteTesting()
    ],
    test: {
        environment: 'jsdom',
        setupFiles: ['./vitest-setup.js'],
        include: ['src/**/*.test.js']
    }
});

import '@testing-library/jest-dom/vitest';

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

/** A snippet made in plain JavaScript: the test's version of <Button>Save</Button>. */
const label = (/** @type {string} */ text) =>
    createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));

describe('Button', () => {
    test('renders its label as a button', () => {
        render(Button, { children: label('Save') });

        expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
    });

    test('is primary and medium by default', () => {
        render(Button, { children: label('Save') });

        expect(screen.getByRole('button')).toHaveClass('primary', 'md');
    });

    test('calls onclick once per click', async () => {
        const user = userEvent.setup();
        const onclick = vi.fn();
        render(Button, { children: label('Save'), onclick });

        await user.click(screen.getByRole('button', { name: 'Save' }));

        expect(onclick).toHaveBeenCalledOnce();
    });

    test('does not call the click handler when disabled', async () => {
        const user = userEvent.setup();
        const onclick = vi.fn();
        render(Button, { children: label('Share'), onclick, disabled: true });

        await user.click(screen.getByRole('button', { name: 'Share' }));

        expect(onclick).not.toHaveBeenCalled();
    });
});

import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { expect, test, vi } from 'vitest';
import NoteRow from './NoteRow.svelte';

test('shows the title and, by default, nothing else', () => {
    render(NoteRow, { title: 'Shopping list' });

    expect(screen.getByText('Shopping list')).toBeInTheDocument();
    expect(screen.queryByText('Pinned')).not.toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
});

test('shows the Pinned label when pinned', () => {
    render(NoteRow, { title: 'Shopping list', pinned: true });

    expect(screen.getByText('Pinned')).toBeInTheDocument();
});

test('tells the parent when Delete is clicked', async () => {
    const user = userEvent.setup();
    const ondelete = vi.fn();
    const onopen = vi.fn();
    render(NoteRow, { title: 'Shopping list', ondelete, onopen });

    await user.click(screen.getByRole('button', { name: 'Delete Shopping list' }));

    expect(ondelete).toHaveBeenCalledOnce();
    expect(onopen).not.toHaveBeenCalled();
});

import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { tick } from 'svelte';
import { afterEach, expect, test, vi } from 'vitest';
import UndoBar from './UndoBar.svelte';

afterEach(() => {
    vi.useRealTimers();
});

test('is empty until show() is called', async () => {
    const { component } = render(UndoBar);
    expect(screen.queryByText('Shopping list deleted')).not.toBeInTheDocument();

    component.show('Shopping list deleted');
    await tick();

    expect(screen.getByRole('status')).toHaveTextContent('Shopping list deleted');
});

test('Undo calls onundo and hides the bar', async () => {
    const user = userEvent.setup();
    const onundo = vi.fn();
    const { component } = render(UndoBar, { onundo });
    component.show('Shopping list deleted');
    await tick();

    await user.click(screen.getByRole('button', { name: 'Undo' }));

    expect(onundo).toHaveBeenCalledOnce();
    expect(screen.queryByText('Shopping list deleted')).not.toBeInTheDocument();
});

test('hides itself after duration milliseconds', async () => {
    vi.useFakeTimers();
    const { component } = render(UndoBar, { duration: 3000 });
    component.show('Shopping list deleted');
    await tick();

    vi.advanceTimersByTime(2999);
    await tick();
    expect(screen.getByText('Shopping list deleted')).toBeInTheDocument();

    vi.advanceTimersByTime(1);
    await tick();
    expect(screen.queryByText('Shopping list deleted')).not.toBeInTheDocument();
});