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 →

@noma.to/qwik-testing-library reexporta todo desde @testing-library/dom, además de:

• render

• cleanup

render

Renderiza tu componente en el DOM con Qwik. Por defecto, cuando no se proporcionan opciones, el componente se renderizará en un <host> adjuntado a 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,
})

Opciones de Renderizado

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

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

Puedes envolver tu componente en un wrapper para proporcionar un contexto y otras funcionalidades necesarias para el componente bajo prueba.

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

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

Resultados del Renderizado

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

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

container

El elemento del DOM donde se monta el componente. Corresponde a renderOptions.container. Si no usas renderOptions.container, este será document.createElement('host'). En general, evita usar container directamente para consultar elementos; utiliza en su lugar consultas de testing-library.

asFragment

Devuelve un DocumentFragment de tu componente renderizado. Esto puede ser útil si necesitas evitar enlaces en vivo y ver cómo reacciona tu componente 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 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 '@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 y destruye el componente Qwik.

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

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 '@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

Destruye todos los componentes y elimina cualquier elemento añadido a document.body o 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()