Skip to main content

API


@testing-library/dom

This library re-exports everything from the DOM Testing Library (@testing-library/dom). See the documentation to see what goodies you can use.

render

import {render} from '@testing-library/preact'

const {results} = render(<YourComponent />, {options})

Options

OptionDescriptionDefault
containerThe HTML element the component is mounted to.baseElement
baseElementThe root HTML element to which the container is appended to.document.body
queriesQueries to bind to the baseElement. See within.null
hydrateUsed when the component has already been mounted and requires a rerender. Not needed for most people. The rerender function passed back to you does this already.false
wrapperA parent component to wrap YourComponent.null

Results

ResultDescription
containerThe HTML element the component is mounted to.
baseElementThe root HTML element to which the container is appended to.
debugLogs the baseElement using prettyDom.
unmountUnmounts the component from the container.
rerenderCalls render again passing in the original arguments and sets hydrate to true.
asFragmentReturns the innerHTML of the container.
...queriesReturns all query functions to be used on the baseElement. If you pass in query arguments than this will be those, otherwise all.

cleanup

Unmounts the component from the container and destroys the container.

This is called automatically if your testing framework (such as mocha, Jest or Jasmine) injects a global afterEach() function into the testing environment. If not, you will need to call cleanup() after each test.

If you'd like to disable this then set process.env.PTL_SKIP_AUTO_CLEANUP to true when running your tests.

import {render, cleanup} from '@testing-library/preact'

afterEach(() => {
cleanup()
}) // Default on import: runs it after each test.

render(<YourComponent />)

cleanup() // Or like this for more control.

act

Just a convenience export that points to preact/test-utils/act. All renders and events being fired are wrapped in act, so you don't really need this. It's responsible for flushing all effects and rerenders after invoking it.

📝 If you'd love to learn more, checkout this explanation. Even though it's for React, it gives you an idea of why it's needed.

fireEvent

Passes it to the @testing-library/dom fireEvent. It's also wrapped in act so you don't need to worry about doing it.

📝 Keep in mind mainly when using h / Preact.createElement that React uses a Synthetic event system, and Preact uses the browser's native addEventListener for event handling. This means events like onChange and onDoubleClick in React, are onInput and onDblClick in Preact. The double click example will give you an idea of how to test using those functions.

Example 1

const cb = jest.fn()

function Counter() {
useEffect(cb)

const [count, setCount] = useState(0)

return <button onClick={() => setCount(count + 1)}>{count}</button>
}

const {
container: {firstChild: buttonNode},
} = render(<Counter />)

// Clear the first call to useEffect that the initial render triggers.
cb.mockClear()

// Fire event Option 1.
fireEvent.click(buttonNode)

// Fire event Option 2.
fireEvent(
buttonNode,
new MouseEvent('click', {
bubbles: true,
cancelable: true,
button: 0,
}),
)

expect(buttonNode).toHaveTextContent('1')
expect(cb).toHaveBeenCalledTimes(1)

Example 2

const handler = jest.fn()

const {
container: {firstChild: input},
} = render(<input type="text" onInput={handler} />)

fireEvent.input(input, {target: {value: 'a'}})

expect(handler).toHaveBeenCalledTimes(1)

Example 3

const ref = createRef()
const spy = jest.fn()

render(
h(elementType, {
onDblClick: spy,
ref,
}),
)

fireEvent['onDblClick'](ref.current)

expect(spy).toHaveBeenCalledTimes(1)