getRender
(wiringTree, options) => ({ ...find{childNode}, ...globalHelpers })
The root function for all of react-wiring-library
. Pass in your
wiring tree and options and get back a render function to call
in your tests.
Arguments
wiringTree
(Object) A tree shaped object that describes all of the serializers and interactions needed to test your componentsoptions
(Object) An object of configurations that will apply to the entirety of the wiring tree
Returns
...find{childNode}
The helpers to query for all of the top level children in the wiring tree. These are the only nodes that can be serialized in tests....globalHelpers
All of the global helpers provided byreact-wiring-library
.
Example
const wiringTree = {
...
}
const options = {
...
}
const render = getRender(wiringTree, options)
const {findFirstChild} = render(component)
Options
customQueries
(Object)
{ TypeName: (element, ...queryArgs) => foundElement }
Makes it possible to add all of the
query variations
from dom-testing-library
for a new type of query.
import {queryHelpers} from '@testing-library/react'
const {queryAllByAttribute} = queryHelpers
const options = {
customQueries: {
IconName: (element, iconName) =>
queryAllByAttribute('xlink:href', element, iconName),
},
}
const render = getRender(wiring, options)
const {findChild} = render(component)
const {findByIconName, findAllByIconName, queryByIconName} = await findChild()
render
(Function)
(...renderArgs) => ({ ...returnedFromRender })
By default, the render function that gets returned from getRender
simply calls
the
render
function from react-testing-library
and returns it's result. Ff you need to
set up mocks, or add custom functionality before
render
is
called, this is the place to do it.
import {render as baseRender} from '@testing-library/react'
import mockApi from './mockApi'
const options = {
render: (component, apiShape) => {
mockApi(apiShape)
return baseRender(component)
},
}
const render = getRender(wiringTree, options)
const apiShape = {
// describes what your API should return
}
const {findChild} = render(<Component />, apiShape)
customFunctions
(Object)
{
withinElement: ({ ...elementHelpers }) => ({ ...newElementHelpers },
global: ({ ...globalHelpers }) => ({ ...newGlobalHelpers }),
}
This object allows you to add new helpers that will be available in every wiring node. Each key in the object is a function that uses the built in helpers to create new helpers. The two helper types are as follows.
withinElement
. These helpers are similar tofindByTestId
orclick
in that are targeted at and work within a specific DOM element. These are only returned fromfind{childNode}
global
These helpers are just generic functions that don't need to be targeted at a specific element. For convenience, these are returned from bothfind{childNode}
andrender
const options = {
customFunctions: {
withinElement: ({findByTestId}) => {
return {
findByTestIdWithPrefix: testId => findByTestId(`test-id-${testId}`),
}
},
global: () => {
return {
waitForMS: ms =>
new Promise(resolve => setTimeout(() => resolve(), ms)),
}
},
},
}
const render = getRender(wiringTree, options)
const {findChild, waitForMS} = render(<Component />)
await waitForMS(100)
const {findByTestIdWithPrefix} = await findChild()
await findByTestIdWithPrefix('foo')