Exemple

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

astuce

Consultez le dépôt svelte-testing-library pour des exemples détaillés, y compris des exemples pour tester les anciens composants Svelte 3 et 4.

Cet exemple simple démontre comment :

• Passer les props à votre composant Svelte via render()

• Interroger la structure des éléments DOM de votre composant en utilisant screen

• Interagir avec votre composant via @testing-library/user-event

• Effectuer des assertions avec expect, en utilisant les matchers de @testing-library/jest-dom

Pour des ressources supplémentaires, des modèles et des bonnes pratiques sur le test des composants Svelte et d'autres fonctionnalités Svelte, consultez les recettes de test 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()
})