Ir para o conteúdo principal

API

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

O @testing-library/svelte reexporta tudo do @testing-library/dom, além de:

render​

Renderiza seu componente no DOM com Svelte. Por padrão, o componente será renderizado em uma <div> anexada ao document.body.

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

const result = render(MyComponent, componentOptions, renderOptions)

Opções do Componente​

Você pode personalizar como o componente é criado e montado. Essas opções são passadas diretamente ao Svelte.

Se você só precisa enviar props para seu componente, pode passá-las diretamente, desde que essas props não compartilhem nome com uma opção do 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')]]),
})

As opções mais comuns que você precisará são:

OptionDescriptionDefault
propsProps to pass to the component.N/A
contextA Map of context values to render the component with.N/A
targetAn HTMLElement to render the component into.<div> appended to document.body

Se você especificar a opção target, o elemento target não será anexado automaticamente ao document.body e será usado como elemento base para queries vinculadas e debug.

Consulte a documentação da API de componentes do lado do cliente do Svelte para todas as opções disponíveis.

Opções de Renderização​

Você também pode personalizar como a Svelte Testing Library renderiza seu componente. Na maioria das vezes, você não precisará modificar essas opções.

cuidado

Antes do @testing-library/svelte@5.0.0, a opção baseElement se chamava container.

OptionDescriptionDefault
baseElementThe base element for queries and debug.componentOptions.target ?? document.body
queriesCustom Queries.N/A

Resultados da Renderização​

ResultDescription
baseElementThe base DOM element used for queries.
componentThe mounted Svelte component.
containerThe DOM element the component is mounted to.
debugLog elements using prettyDOM.
rerenderUpdate the component's props.
unmountUnmount and destroy the component.
...queriesQuery functions bound to baseElement.

baseElement​

Adicionado no @testing-library/svelte@5.0.0

O elemento DOM base ao qual as queries estão vinculadas. Corresponde ao renderOptions.baseElement. Se você não usar componentOptions.target nem renderOptions.baseElement, será document.body.

container​

O elemento DOM no qual o componente está montado. Corresponde ao componentOptions.target. Em geral, evite usar container diretamente para buscar elementos; use queries da testing-library em vez disso.

dica

Use container.firstChild para obter o primeiro elemento renderizado do seu componente.

cuidado

Antes do @testing-library/svelte@5.0.0, container era definido como o elemento base. Use container.firstChild.firstChild para obter o primeiro elemento renderizado do componente em versões anteriores.

component​

A instância do componente Svelte. Veja a API de componentes do Svelte para mais detalhes.

dica

Evite usar component exceto para testar APIs voltadas ao desenvolvedor, como funções exportadas. Em vez disso, interaja com o DOM. Leia Avoid the Test User de Kent C. Dodds para entender a diferença entre o usuário final e o desenvolvedor usuário.

debug​

Registra o baseElement ou um elemento específico usando prettyDOM.

dica

Se seu baseElement for o padrão document.body, 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​

Atualiza uma ou mais props do componente e aguarda o Svelte atualizar.

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

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

Antes do @testing-library/svelte@5.0.0, chamar rerender destruiria e remontaria o componente. Use component.$set e act para atualizar props em versões anteriores:

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

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

unmount​

Desmonta e destrói o componente Svelte.

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

unmount()

Queries​

Funções de query vinculadas ao baseElement. Se você passou queries personalizadas para render, elas estarão disponíveis no lugar das queries padrão.

dica

Se seu baseElement for o padrão document.body, recomendamos usar screen em vez de queries 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​

Destrói todos os componentes e remove quaisquer elementos adicionados ao document.body.

informação

O cleanup é chamado automaticamente se seu framework de testes adicionar um método global afterEach (ex: Mocha, Jest ou Jasmine), ou se você usar import '@testing-library/svelte/vitest' no seu arquivo de configuração do Vitest. Geralmente, você não precisa chamar cleanup manualmente.

Para desativar a limpeza automática em frameworks que usam afterEach, defina 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​

Garante que todas atualizações pendentes do Svelte sejam aplicadas ao DOM. Opcionalmente, você pode passar uma função para ser executada antes das atualizações. Se a função retornar uma Promise, ela será resolvida primeiro.

Utiliza o método tick do Svelte para aplicar atualizações.

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

const {component} = render(MyComponent)

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

fireEvent (async)​

Dispara um evento e aguarda o Svelte atualizar o DOM. Um wrapper assíncrono do fireEvent da DOM Testing Library.

dica

Sempre que possível, recomendamos @testing-library/user-event em vez de fireEvent.

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

render(MyComponent)

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