Ejemplo

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

consejo

Consulta el repositorio de svelte-testing-library para ver ejemplos detallados, incluyendo ejemplos para probar componentes antiguos de Svelte 3 y 4.

Este ejemplo básico demuestra cómo:

• Pasar props a tu componente Svelte usando render()

• Consultar la estructura de los elementos DOM de tu componente usando screen

• Interactuar con tu componente usando @testing-library/user-event

• Realizar aserciones usando expect, con matchers de @testing-library/jest-dom

Para recursos adicionales, patrones y mejores prácticas sobre pruebas de componentes Svelte y otras funcionalidades de Svelte, revisa las recetas de pruebas de Svelte Society.

basic.svelte

<script>
  let {name} = $props()

  let showGreeting = $state(false)

  const onclick = () => (showGreeting = true)
</script>

<button {onclick}>Greet</button>

{#if showGreeting}
<p>Hello {name}</p>
{/if}

basic.test.js

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('no initial greeting', () => {
  render(Subject, {name: 'World'})

  const button = screen.getByRole('button', {name: 'Greet'})
  const greeting = screen.queryByText(/hello/iu)

  expect(button).toBeInTheDocument()
  expect(greeting).not.toBeInTheDocument()
})

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()
})