API

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

@noma.to/qwik-testing-library réexporte l'intégralité de @testing-library/dom, ainsi que :

• render

• cleanup

render

Rend votre composant dans le DOM avec Qwik. Par défaut, lorsqu'aucune option n'est fournie, le composant sera rendu dans un <host> ajouté à 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,
})

Options de rendu

Vous pouvez personnaliser la manière dont Qwik Testing Library rend votre composant. La plupart du temps, vous ne devriez pas avoir besoin de modifier ces options.

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

Vous pouvez encapsuler votre composant dans un wrapper pour fournir un contexte et d'autres fonctionnalités nécessaires au composant testé.

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

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

Résultats du rendu

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

L'élément DOM de base auquel les requêtes sont liées. Correspond à renderOptions.baseElement. Si vous n'utilisez pas renderOptions.baseElement, cela sera document.body.

container

L'élément DOM dans lequel le composant est monté. Correspond à renderOptions.container. Si vous n'utilisez pas renderOptions.container, cela sera document.createElement('host'). En général, évitez d'utiliser container directement pour interroger des éléments ; utilisez plutôt les requêtes testing-library.

asFragment

Retourne un DocumentFragment de votre composant rendu. Cela peut être utile si vous devez éviter les liaisons actives et observer comment votre composant réagit aux événements.

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

Journalise le baseElement ou un élément donné en utilisant prettyDOM.

astuce

Si votre baseElement est le document.body par défaut, nous recommandons d'utiliser 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

Démonte et détruit le composant Qwik.

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

unmount()

Requêtes

Les fonctions de requête liées au baseElement. Si vous avez passé des requêtes personnalisées à render, celles-ci seront disponibles à la place des requêtes par défaut.

astuce

Si votre baseElement est le document.body par défaut, nous recommandons d'utiliser screen plutôt que les requêtes liées.

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

Détruit tous les composants et supprime tous les éléments ajoutés à 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()