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

1. wiringTree (Object) A tree shaped object that describes all of the serializers and interactions needed to test your components
2. options (Object) An object of configurations that will apply to the entirety of the wiring tree

Returns

1. ...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.
2. ...globalHelpers All of the global helpers provided by react-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.

1. withinElement. These helpers are similar to findByTestId or click in that are targeted at and work within a specific DOM element. These are only returned from find{childNode}
2. global These helpers are just generic functions that don't need to be targeted at a specific element. For convenience, these are returned from both find{childNode} and render

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