API
Here you'll find a high level summary of the most frequently used parts of Native Testing Library. For a more comprehensive look at what's possible, check out the main docs site.
render
function render(
ui: React.ReactElement<any>,
options?: {
/* You won't often use this, expand below for docs on options */
}
): RenderResult
Create a ReactTestRenderer
Instance.
import { render } from '@testing-library/react-native'
render(<View />)
import { render } from '@testing-library/react-native'
test('renders a message', () => {
const { container, getByText } = render(<Text>Hello, World!</Text>)
expect(getByText('Hello, world!')).toBeTruthy()
expect(container.toJSON()).toMatchInlineSnapshot(`
<Text>Hello, World!</Text>
`)
})
render
Options
Most of the time you won't need to pass any options to render
, but when you
do, you will pass them as the second parameter. There are some important key
differences between this and React Testing Library
that you will want to be
aware of.
wrapper
Pass a React Component as the wrapper
option to have it rendered around the
inner element. This is most useful for creating reusable custom render functions
for common data providers. See setup for examples.
queries
Queries to bind. Overrides the default set from Native Testing Library
unless
merged.
// Example, a function to traverse table contents
import * as tableQueries from 'my-table-query-libary'
import queries from '@testing-library/react-native'
const { getByRowColumn, getByText } = render(<MyTable />, {
queries: { ...queries, ...tableQueries },
})
See helpers for guidance on using utility functions to create custom queries.
Custom queries can also be added globally by following the custom render guide.
render
Result
The render
method returns an object that has a few properties:
...queries
The most important feature of render
is that the
default queries are
automatically returned with their first argument bound to the baseElement
.
Example
const { getByText, getByTestId /* etc */ } = render(<Component />)
container
The ReactTestRendererInstance
result from your render. This has helpful
methods like toTree()
and toJSON()
.
You should rarely use the container. There are very few instances where you need to access the container itself to do something you'd need to in a test.
baseElement
This is the root element of your render result. By default, this is what all of your queries will be run on, and you could also use it to do any custom searching logic you wanted to..
debug
This method is a shortcut for console.log(prettyPrint(container.toJSON()))
.
import { render } from '@testing-library/react-native'
const { debug } = render(
<View>
<Text>Hello World</Text>
</View>
)
debug()
// <View>
// <Text>
// Hello World
// </Text>
// </View>
This is a simple wrapper around prettyPrint
which is also exported.
rerender
Although its likely better to test updating your props the way a user would (through events and interaction), this method will allow you to re-render your entire tree at the base with new props.
import { render } from '@testing-library/react-native'
const { rerender } = render(<NumberDisplay number={1} />)
// re-render the same component with different props
rerender(<NumberDisplay number={2} />)
unmount
This will cause the rendered component to be unmounted. This is useful for
testing what happens when your component is removed from the page (like testing
that you don't leave event handlers hanging around causing memory leaks). Note
that you don't need to call this afterEach
like you do in react testing
library because these elements aren't being added to a DOM. Use it only as
necessary.
This method is a wrapper around ReactTestRenderer.unmount()
import { render } from '@testing-library/react-native'
const { unmount } = render(<Login />)
unmount()
act
This is a light wrapper around the
react-test-renderer
act
function.
All it does is forward all arguments to the act function if your version of
react supports act
.