API

[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 →

@testing-library/svelte reexporta todo desde @testing-library/dom, además de:

• render

• act

• cleanup

• fireEvent (asíncrono)

render

Renderiza tu componente en el DOM con Svelte. Por defecto, el componente se renderizará dentro de un <div> añadido a document.body.

import {render} from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'

const result = render(MyComponent, componentOptions, renderOptions)

Opciones del Componente

Puedes personalizar cómo se crea y monta el componente. Estas opciones se pasan directamente a Svelte.

Si solo necesitas enviar props a tu componente, puedes pasarlas directamente, siempre que esos props no compartan nombre con una opción del componente.

// pass props to the component
render(YourComponent, {myProp: 'value'})

// pass props and other options to the component
render(YourComponent, {
  props: {myProp: 'value'},
  context: new Map([[('theme': 'dark')]]),
})

Las opciones más comunes que necesitarás son:

Option	Description	Default
props	Props to pass to the component.	N/A
context	A Map of context values to render the component with.	N/A
target	An HTMLElement to render the component into.	<div> appended to document.body

Si especificas la opción target, el elemento target no se añadirá automáticamente a document.body, y se usará como elemento base para consultas vinculadas y debug.

Consulta la documentación de la API de componentes del lado del cliente de Svelte para ver todas las opciones disponibles.

Opciones de Renderizado

También puedes personalizar cómo Svelte Testing Library renderiza tu componente. En la mayoría de los casos, no necesitarás modificar estas opciones.

precaución

Antes de @testing-library/svelte@5.0.0, la opción baseElement se llamaba container.

Option	Description	Default
baseElement	The base element for queries and debug.	componentOptions.target ?? document.body
queries	Custom Queries.	N/A

Resultados del Renderizado

Result	Description
baseElement	The base DOM element used for queries.
component	The mounted Svelte component.
container	The DOM element the component is mounted to.
debug	Log elements using prettyDOM.
rerender	Update the component's props.
unmount	Unmount and destroy the component.
...queries	Query functions bound to baseElement.

baseElement

Añadido en @testing-library/svelte@5.0.0

El elemento DOM base al que se vinculan las consultas. Corresponde a renderOptions.baseElement. Si no usas componentOptions.target ni renderOptions.baseElement, este será document.body.

container

El elemento DOM donde está montado el componente. Corresponde a componentOptions.target. En general, evita usar container directamente para consultar elementos; usa consultas de testing-library en su lugar.

consejo

Usa container.firstChild para obtener el primer elemento renderizado de tu componente.

precaución

Antes de @testing-library/svelte@5.0.0, container se establecía como el elemento base. Usa container.firstChild.firstChild para obtener el primer elemento renderizado del componente en versiones anteriores.

component

La instancia del componente Svelte. Consulta la API de componentes de Svelte para más detalles.

consejo

Evita usar component excepto para probar APIs orientadas a desarrolladores, como funciones exportadas. En su lugar, interactúa con el DOM. Lee Evitar el Usuario de Prueba de Kent C. Dodds para entender la diferencia entre el usuario final y el usuario desarrollador.

debug

Registra el baseElement o un elemento dado usando prettyDOM.

consejo

Si tu baseElement es el predeterminado document.body, te recomendamos usar screen.debug.

import {render, screen} from '@testing-library/svelte'

const {debug} = render(MyComponent, {myProp: 'value'})

const button = screen.getByRole('button')

// log `document.body`
screen.debug()

// log your custom `target` or `baseElement`
debug()

// log a specific element
screen.debug(button)
debug(button)

rerender

Actualiza una o más props del componente y espera a que Svelte se actualice.

const {rerender} = render(MyComponent, {myProp: 'value'})

await rerender({myProp: 'new value'}))

precaución

Antes de @testing-library/svelte@5.0.0, llamar a rerender destruiría y volvería a montar el componente. Usa component.$set y act para actualizar props en versiones anteriores:

const {component} = render(MyComponent, {myProp: 'value'})

await act(() => component.$set({myProp: 'new value'}))

unmount

Desmonta y destruye el componente Svelte.

const {unmount} = render(MyComponent, {myProp: 'value'})

unmount()

Consultas

Funciones de consulta vinculadas al baseElement. Si pasaste consultas personalizadas a render, estas estarán disponibles en lugar de las consultas predeterminadas.

consejo

Si tu baseElement es el predeterminado document.body, te recomendamos usar screen en lugar de consultas vinculadas.

import {render, screen} from '@testing-library/svelte'

const {getByRole} = render(MyComponent, {myProp: 'value'})

// query `document.body`
const button = screen.getByRole('button')

// query using a custom `target` or `baseElement`
const button = getByRole('button')

cleanup

Destruye todos los componentes y elimina cualquier elemento añadido a document.body.

información

cleanup se llama automáticamente si tu framework de pruebas implementa un método global afterEach (como Mocha, Jest o Jasmine), o si usas import '@testing-library/svelte/vitest' en tu archivo de configuración de Vitest. Normalmente no necesitarás llamar a cleanup manualmente.

Si deseas desactivar la limpieza automática en frameworks que usan afterEach, establece process.env.STL_SKIP_AUTO_CLEANUP.

import {render, cleanup} from '@testing-library/svelte'

// Default: runs after each test
afterEach(() => {
  cleanup()
})

render(YourComponent)

// Called manually for more control
cleanup()

act

Asegura que todas las actualizaciones pendientes de Svelte se apliquen al DOM. Opcionalmente, puedes pasar una función para ejecutar antes de aplicar las actualizaciones. Si la función devuelve una Promise, se resolverá primero.

Utiliza el método tick de Svelte para aplicar actualizaciones.

import {act, render} from '@testing-library/svelte'

const {component} = render(MyComponent)

await act(() => {
  component.updateSomething()
})

fireEvent (asíncrono)

Dispara un evento y espera a que Svelte actualice el DOM. Un envoltorio asíncrono de fireEvent de DOM Testing Library.

consejo

Cuando sea posible, recomendamos @testing-library/user-event en lugar de fireEvent.

import {fireEvent, render, screen} from '@testing-library/svelte'

render(MyComponent)

const button = screen.getByRole('button')
await fireEvent.click(button)