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 @noma.to/qwik-testing-library reexporta tudo do @testing-library/dom, além de:

• render

• cleanup

render

Renderiza seu componente no DOM com Qwik. Por padrão, quando nenhuma opção é fornecida, o componente será renderizado em um <host> anexado ao document.body.

import {render} from '@noma.to/qwik-testing-library'
import {MockProvider} from './MockProvider'
import {MyComponent} from './MyComponent'

const result = await render(<MyComponent />, {
  baseElement: document.body,
  container: document.createElement('host'),
  wrapper: MockProvider,
})

Opções de Renderização

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

Option	Description	Default
container	The container in which the component is rendered.	document.createElement('host')
baseElement	The base element for queries and debug.	document.body
queries	Custom Queries.	N/A
wrapper	The wrapper to provide a context to the component.	N/A

wrapper

Você pode encapsular seu componente em um wrapper para fornecer um contexto e outras funcionalidades necessárias para o componente em teste.

import {render} from '@noma.to/qwik-testing-library'
import {QwikCityMockProvider} from '@builder.io/qwik-city'

await render(<MyComponent />, {wrapper: QwikCityMockProvider})

Resultados da Renderização

Result	Description
baseElement	The base DOM element used for queries.
container	The DOM element the component is mounted to.
asFragment	Convert the DOM element to a DocumentFragment.
debug	Log elements using prettyDOM.
unmount	Unmount and destroy the component.
...queries	Query functions bound to baseElement.

baseElement

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

container

O elemento DOM onde o componente está montado. Corresponde a renderOptions.container. Se você não usar renderOptions.container, será document.createElement('host'). Em geral, evite usar container diretamente para consultar elementos; use queries do testing-library em vez disso.

asFragment

Retorna um DocumentFragment do seu componente renderizado. Isso pode ser útil se você precisar evitar ligações em tempo real e ver como seu componente reage a eventos.

import {component$} from '@builder.io/qwik';
import {render} from '@testing-library/react';
import {userEvent} from "@testing-library/user-event";

const TestComponent = component$(() => {
  const count = useSignal(0);

  return (
    <button onClick$={() => (count.value++))}>
      Click to increase: {count}
    </button>
  )
});

const {getByText, asFragment} = await render(<TestComponent />)
const firstRender = asFragment()

userEvent.click(getByText(/Click to increase/))

// This will snapshot only the difference between the first render, and the
// state of the DOM after the click event.
// See https://github.com/jest-community/snapshot-diff
expect(firstRender).toMatchDiffSnapshot(asFragment())

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 '@noma.to/qwik-testing-library'

const {debug} = await render(<MyComponent />)

const button = screen.getByRole('button')

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

// log your custom the `baseElement`
debug()

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

unmount

Desmonta e destrói o componente Qwik.

const {unmount} = await render(<MyComponent />)

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 '@noma.to/qwik-testing-library'

const {getByRole} = await render(<MyComponent />)

// 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 ou renderOptions.baseElement.

import {render, cleanup} from '@noma.to/qwik-testing-library'

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

await render(<MyComponent />)

// Called manually for more control
cleanup()