Exemplo

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

dica

Confira o repositório svelte-testing-library para exemplos detalhados, incluindo exemplos para testar componentes mais antigos do Svelte 3 e 4.

Este exemplo básico demonstra como:

• Passar props para seu componente Svelte usando render()

• Consultar a estrutura dos elementos DOM do seu componente usando screen

• Interagir com seu componente usando @testing-library/user-event

• Fazer asserções usando expect, com matchers do @testing-library/jest-dom

Para recursos adicionais, padrões e melhores práticas sobre teste de componentes Svelte e outros recursos do Svelte, confira as receitas de teste da 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()
})