React Testing Library wrapper option
In the docs
The wrapper
option lets you pass in a component to be wrapped around the given ui
in a RTL render()
.
jsx
const RenderWrapper = ({ children }) => {
return (
<ThemeProvider theme="light">
{children}
</ThemeProvider>
)
}
const customRender = (ui, options) => {
return render(ui, { wrapper: RenderWrapper, ...options });
}
See Custom Render in the React Testing Library API docs
In the source
wrapper
is passed in to the renderRoot
function, it's renamed to WrapperComponent
.
Which is then passed in to wrapUiIfNeeded
as wrapperComponent
js
function wrapUiIfNeeded(innerElement, wrapperComponent) {
return wrapperComponent
? React.createElement(wrapperComponent, null, innerElement)
: innerElement
}