Svelte Testing Library

If your component uses Svelte's standard setContext and getContext APIs with a specific key, you can inject that context directly via the context option in the render function.

When using the context option, you must also provide any component props under the props key within the options object.

Usage Pattern:

• context: A Map where keys are the context identifiers and values are the context data.
• props: An object containing the component's props.

import { render, screen } from '@testing-library/svelte'
import { expect, test } from 'vitest'
import Subject from './context.svelte'

test('notifications with messages from context', () => {
  const messages = {
    get current() {
      return [
        { id: 'abc', text: 'hello' },
        { id: 'def', text: 'world' },
      ]
    }
  }

  render(Subject, {
    context: new Map([['messages', messages]]),
    props: { label: 'Notifications' },
  })

  const status = screen.getByRole('status', { name: 'Notifications' })
  expect(status).toHaveTextContent('hello world')
})

If a component requires a parent component to render or operate correctly (for example, to provide Svelte context), you can use the wrapper and wrapperProps options in the render function.

When to use:

• When the component under test depends on a provider component (like a context provider).
• Note: If you can provide the context directly without a provider component, use the context option instead.
• Warning: If a component cannot be tested in isolation, consider if you are testing at the wrong level or if the component structure should be refactored for better testability.

import { render, screen } from '@testing-library/svelte'
import Subject from './child.svelte'
import Wrapper from './wrapper.svelte'

// Example usage:
render(
  Subject, 
  { label: 'Notifications' }, // Component props
  { 
    wrapper: Wrapper, 
    wrapperProps: { messages: [{ id: '1', text: 'hello' }] } 
  }
)

This example demonstrates the standard workflow for testing Svelte components using @testing-library/svelte.

Key capabilities include:

• Rendering components with props: Use the render() function to mount a Svelte component and pass initial props via an options object.
• Querying the DOM: Use the screen object to find elements within the rendered component using queries like getByRole, getByText, or queryByText.
• Simulating user interaction: Use @testing-library/user-event to simulate realistic user actions like clicks.
• Making assertions: Use expect with matchers from @testing-library/jest-dom (e.g., toBeInTheDocument()) to verify the state of the DOM.

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

import Subject from './basic.svelte'

test('greeting appears on click', async () => {
  const user = userEvent.setup()
  render(Subject, { name: 'World' })

  const button = screen.getByRole('button')
  await user.click(button)
  const greeting = screen.getByText(/hello world/iu)

  expect(greeting).toBeInTheDocument()
})

Since snippets are often implementation details, the easiest way to test them is to treat them as user-facing results. For simple snippets, you can use a wrapper component and "dummy" children to verify their presence. Using data-testid attributes on the dummy children helps you locate them within the rendered output using @testing-library/svelte utilities like within.

// basic-snippet.svelte
<script>
  let { children } = $props()
</script>

<h1>
  {@render children?.()}
</h1>

// basic-snippet.test.svelte
<script>
  import Subject from './basic-snippet.svelte'
</script>

<Subject>
  <span data-testid="child"></span>
</Subject>

// basic-snippet.test.js
import { render, screen, within } from '@testing-library/svelte'
import { expect, test } from 'vitest'
import SubjectTest from './basic-snippet.test.svelte'

test('basic snippet', () => {
  render(SubjectTest)

  const heading = screen.getByRole('heading')
  const child = within(heading).getByTestId('child')

  expect(child).toBeInTheDocument()
})

When testing complex snippets that require checking arguments (e.g., snippets that receive data from the component), use Svelte's createRawSnippet API. This allows you to define a snippet in your test file that can intercept and validate the arguments passed to it by the component under test.

// complex-snippet.svelte
<script>
  let { name, message } = $props()
  const greeting = $derived(`Hello, ${name}!`)
</script>

<p>
  {@render message?.(greeting)}
</p>

// complex-snippet.test.js
import { render, screen } from '@testing-library/svelte'
import { createRawSnippet } from 'svelte'
import { expect, test } from 'vitest'
import Subject from './complex-snippet.svelte'

test('renders greeting in message snippet', () => {
  render(Subject, {
    name: 'Alice',
    message: createRawSnippet((greeting) => ({
      render: () => `<span data-testid="message">${greeting()}</span>`,
    })),
  })

  const message = screen.getByTestId('message')
  expect(message).toHaveTextContent('Hello, Alice!')
})