api.mdx

id	title	sidebar_label
api	API	API

@noma.to/qwik-testing-library re-exports everything from @testing-library/dom, as well as:

• render
• cleanup

render

Render your component to the DOM with Qwik. By default, when no options are provided, the component will be rendered into a <host> appended to document.body.

import{render}from'@noma.to/qwik-testing-library'import{MockProvider}from'./MockProvider'import{MyComponent}from'./MyComponent'constresult=awaitrender(<MyComponent/>,{baseElement: document.body,container: document.createElement('host'),wrapper: MockProvider,})

Render Options

You may also customize how Qwik Testing Library renders your component. Most of the time, you shouldn't need to modify these 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

You can wrap your component into a wrapper to provide a context and other functionalities needed by the component under test.

import{render}from'@noma.to/qwik-testing-library'import{QwikCityMockProvider}from'@builder.io/qwik-city'awaitrender(<MyComponent/>,{wrapper: QwikCityMockProvider})

Render Results

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

The base DOM element that queries are bound to. Corresponds to renderOptions.baseElement. If you do not use renderOptions.baseElement, this will be document.body.

container

The DOM element the component is mounted in. Corresponds to renderOptions.container. If you do not use renderOptions.container, this will be document.createElement('host'). In general, avoid using container directly to query for elements; use testing-library queries instead.

asFragment

Returns a DocumentFragment of your rendered component. This can be useful if you need to avoid live bindings and see how your component reacts to events.

import{component$}from'@builder.io/qwik';import{render}from'@testing-library/react';import{userEvent}from"@testing-library/user-event";constTestComponent=component$(()=>{constcount=useSignal(0);return(<buttononClick$={()=>(count.value++))}> Click to increase: {count}</button>)});const{getByText, asFragment}=awaitrender(<TestComponent/>)constfirstRender=asFragment()userEvent.click(getByText(/Clicktoincrease/))// 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-diffexpect(firstRender).toMatchDiffSnapshot(asFragment())

debug

Log the baseElement or a given element using prettyDOM.

:::tip

If your baseElement is the default document.body, we recommend using screen.debug.

:::

import{render,screen}from'@noma.to/qwik-testing-library'const{debug}=awaitrender(<MyComponent/>)constbutton=screen.getByRole('button')// log `document.body`screen.debug()// log your custom the `baseElement`debug()// log a specific elementscreen.debug(button)debug(button)

unmount

Unmount and destroy the Qwik component.

const{unmount}=awaitrender(<MyComponent/>)unmount()

Queries

Query functions bound to the baseElement. If you passed custom queries to render, those will be available instead of the default queries.

:::tip

If your baseElement is the default document.body, we recommend using screen rather than bound queries.

:::

import{render,screen}from'@noma.to/qwik-testing-library'const{getByRole}=awaitrender(<MyComponent/>)// query `document.body`constbutton=screen.getByRole('button')// query using a custom `target` or `baseElement`constbutton=getByRole('button')

cleanup

Destroy all components and remove any elements added to document.body or renderOptions.baseElement.

import{render,cleanup}from'@noma.to/qwik-testing-library'// Default: runs after each testafterEach(()=>{cleanup()})awaitrender(<MyComponent/>)// Called manually for more controlcleanup()