2019-04-14 16:12:50 +02:00
---
id: api-queries
title: Queries
---
## Variants
> `getBy` queries are shown by default in the [query documentation](#queries)
> below.
### getBy
2020-02-01 08:19:19 -06:00
`getBy*` queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found (use `getAllBy` instead).
2019-04-14 16:12:50 +02:00
### getAllBy
2020-02-01 08:19:19 -06:00
`getAllBy*` queries return an array of all matching nodes for a query, and throw an error if no elements match.
2019-04-14 16:12:50 +02:00
### queryBy
2020-02-01 08:19:19 -06:00
`queryBy*` queries return the first matching node for a query, and return `null` if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use `queryAllBy` instead).
2019-04-14 16:12:50 +02:00
### queryAllBy
2020-02-01 08:19:19 -06:00
`queryAllBy*` queries return an array of all matching nodes for a query, and return an empty array (`[]` ) if no elements match.
2019-04-14 16:12:50 +02:00
2020-05-15 09:52:33 +02:00
### findBy
`findBy` queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 4500ms. If you need to find more than one element, then use `findAllBy` .
### findAllBy
`findAllBy` queries return a promise which resolves to an array when any matching elements are found. The promise is rejected if no elements match after a default timeout of 4500ms.
2020-05-21 16:07:57 +02:00
:::info
In order to properly use `findBy` and `findAllBy` queries you need at least React >=16.9.0 (featuring async `act` ) or React Native >=0.60 (which comes with React >=16.9.0).
:::
2020-05-15 09:52:33 +02:00
:::info
2020-08-17 14:56:24 +02:00
`findBy` and `findAllBy` queries accept optional `waitForOptions` object argument which can contain `timeout` and `interval` properies which have the same meaning as respective options for [`waitFor` ](api#waitfor ) function.
2020-05-15 09:52:33 +02:00
:::
2019-04-14 16:12:50 +02:00
## Queries
_ Note: most methods like this one return a [`ReactTestInstance`](https://reactjs.org/docs/test-renderer.html#testinstance) with following properties that you may be interested in: _
``` jsx
type ReactTestInstance = {
type : string | Function ,
props : { [ propName : string ] : any } ,
parent : null | ReactTestInstance ,
children : Array < ReactTestInstance | string > ,
} ;
```
### `ByText`
2020-05-15 09:52:33 +02:00
> getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText
2019-04-14 16:12:50 +02:00
Returns a `ReactTestInstance` with matching text – may be a string or regular expression.
2020-08-17 14:56:24 +02:00
This method will join `<Text>` siblings to find matches, similarly to [how React Native handles these components ](https://reactnative.dev/docs/text#containers ). This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components.
2019-04-14 16:12:50 +02:00
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-04-14 16:12:50 +02:00
const { getByText } = render ( < MyComponent / > ) ;
const element = getByText ( 'banana' ) ;
```
2020-07-24 22:53:34 +02:00
### `ByPlaceholderText`
2019-04-14 16:12:50 +02:00
2020-07-24 22:53:34 +02:00
> getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText
2019-04-14 16:12:50 +02:00
Returns a `ReactTestInstance` for a `TextInput` with a matching placeholder – may be a string or regular expression.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-04-14 16:12:50 +02:00
2020-07-24 22:53:34 +02:00
const { getByPlaceholderText } = render ( < MyComponent / > ) ;
const element = getByPlaceholderText ( 'username' ) ;
2019-04-14 16:12:50 +02:00
```
2019-06-10 17:30:27 +02:00
### `ByDisplayValue`
2020-05-15 09:52:33 +02:00
> getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue
2019-06-10 17:30:27 +02:00
Returns a `ReactTestInstance` for a `TextInput` with a matching display value – may be a string or regular expression.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-06-10 17:30:27 +02:00
const { getByDisplayValue } = render ( < MyComponent / > ) ;
const element = getByDisplayValue ( 'username' ) ;
```
2019-04-14 16:12:50 +02:00
### `ByTestId`
2020-05-15 09:52:33 +02:00
> getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId
2019-04-14 16:12:50 +02:00
2020-09-07 21:39:16 +01:00
Returns a `ReactTestInstance` with matching `testID` prop. `testID` – may be a string or a regular expression.
2019-04-14 16:12:50 +02:00
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-04-14 16:12:50 +02:00
const { getByTestId } = render ( < MyComponent / > ) ;
const element = getByTestId ( 'unique-id' ) ;
```
2020-09-11 13:18:52 +02:00
:::info
In the spirit of [the guiding principles ](https://testing-library.com/docs/guiding-principles ), it is recommended to use this only after the other queries don't work for your use case. Using `testID` attributes do not resemble how your software is used and should be avoided if possible. However, they are particularly useful for end-to-end testing on real devices, e.g. using Detox and it's an encouraged technique to use there. Learn more from the blog post ["Making your UI tests resilient to change" ](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change ).
2020-05-14 10:26:06 +02:00
:::
2020-07-21 09:46:06 -04:00
### `ByA11yLabel`, `ByAccessibilityLabel`, `ByLabelText`
2019-05-28 20:47:06 +02:00
2020-05-15 09:52:33 +02:00
> getByA11yLabel, getAllByA11yLabel, queryByA11yLabel, queryAllByA11yLabel, findByA11yLabel, findAllByA11yLabel
> getByAccessibilityLabel, getAllByAccessibilityLabel, queryByAccessibilityLabel, queryAllByAccessibilityLabel, findByAccessibilityLabel, findAllByAccessibilityLabel
2020-07-21 09:46:06 -04:00
> getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText
2019-05-28 20:47:06 +02:00
Returns a `ReactTestInstance` with matching `accessibilityLabel` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-05-28 20:47:06 +02:00
2020-09-11 13:18:52 +02:00
const { getByLabelText } = render ( < MyComponent / > ) ;
const element = getByLabelText ( 'my-label' ) ;
2019-05-28 20:47:06 +02:00
```
2020-07-21 09:46:06 -04:00
### `ByA11yHint`, `ByAccessibilityHint`, `ByHintText`
2019-05-28 20:47:06 +02:00
2020-05-15 09:52:33 +02:00
> getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint
> getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint
2020-07-21 09:46:06 -04:00
> getByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText
2019-05-28 20:47:06 +02:00
Returns a `ReactTestInstance` with matching `accessibilityHint` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-05-28 20:47:06 +02:00
2020-09-11 13:18:52 +02:00
const { getByHintText } = render ( < MyComponent / > ) ;
const element = getByHintText ( 'Plays a song' ) ;
2019-05-28 20:47:06 +02:00
```
2020-09-11 13:18:52 +02:00
:::info
Please consult [Apple guidelines on how `accessibilityHint` should be used ](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint ).
:::
2019-05-28 20:47:06 +02:00
### `ByA11yStates`, `ByAccessibilityStates`
> getByA11yStates, getAllByA11yStates, queryByA11yStates, queryAllByA11yStates
> getByAccessibilityStates, getAllByAccessibilityStates, queryByAccessibilityStates, queryAllByAccessibilityStates
Returns a `ReactTestInstance` with matching `accessibilityStates` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-05-28 20:47:06 +02:00
const { getByA11yStates } = render ( < MyComponent / > ) ;
const element = getByA11yStates ( [ 'checked' ] ) ;
const element2 = getByA11yStates ( 'checked' ) ;
```
2020-07-21 09:46:06 -04:00
### `ByA11yRole`, `ByAccessibilityRole`, `ByRole`
2019-05-28 20:47:06 +02:00
2020-05-15 09:52:33 +02:00
> getByA11yRole, getAllByA11yRole, queryByA11yRole, queryAllByA11yRole, findByA11yRole, findAllByA11yRole
> getByAccessibilityRole, getAllByAccessibilityRole, queryByAccessibilityRole, queryAllByAccessibilityRole, findByAccessibilityRole, findAllByAccessibilityRole
2020-07-21 09:46:06 -04:00
> getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole
2019-05-28 20:47:06 +02:00
Returns a `ReactTestInstance` with matching `accessibilityRole` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2019-05-28 20:47:06 +02:00
const { getByA11yRole } = render ( < MyComponent / > ) ;
const element = getByA11yRole ( 'button' ) ;
```
2020-03-18 14:32:03 +01:00
### `ByA11yState`, `ByAccessibilityState`
2020-05-15 09:52:33 +02:00
> getByA11yState, getAllByA11yState, queryByA11yState, queryAllByA11yState, findByA11yState, findAllByA11yState
> getByAccessibilityState, getAllByAccessibilityState, queryByAccessibilityState, queryAllByAccessibilityState, findByAccessibilityState, findAllByAccessibilityState
2020-03-18 14:32:03 +01:00
Returns a `ReactTestInstance` with matching `accessibilityState` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2020-03-18 14:32:03 +01:00
const { getByA11yState } = render ( < Component / > ) ;
const element = getByA11yState ( { disabled : true } ) ;
```
### `ByA11Value`, `ByAccessibilityValue`
2020-05-15 09:52:33 +02:00
> getByA11yValue, getAllByA11yValue, queryByA11yValue, queryAllByA11yValue, findByA11yValue, findAllByA11yValue
> getByAccessibilityValue, getAllByAccessibilityValue, queryByAccessibilityValue, queryAllByAccessibilityValue, findByAccessibilityValue, findAllByAccessibilityValue
2020-03-18 14:32:03 +01:00
Returns a `ReactTestInstance` with matching `accessibilityValue` prop.
``` jsx
2020-07-28 11:50:49 +02:00
import { render } from '@testing-library/react-native' ;
2020-03-18 14:32:03 +01:00
const { getByA11yValue } = render ( < Component / > ) ;
const element = getByA11yValue ( { min : 40 } ) ;
```
2019-04-14 16:12:50 +02:00
## Unit testing helpers
> Use sparingly and responsibly, escape hatches here
2020-07-28 11:50:49 +02:00
`render` from `@testing-library/react-native` exposes additional queries that **should not be used in component integration testing ** , but some users (like component library creators) interested in unit testing some components may find helpful.
2019-04-14 16:12:50 +02:00
<details>
<summary>Queries helpful in unit testing</summary>
The interface is the same as for other queries, but we won't provide full names so that they're harder to find by search engines.
2020-05-19 16:58:27 +02:00
### `UNSAFE_ByType`
2019-04-14 16:12:50 +02:00
2020-05-19 16:58:27 +02:00
> UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType
2019-04-14 16:12:50 +02:00
2020-05-19 16:58:27 +02:00
Returns a `ReactTestInstance` with matching a React component type.
2020-03-18 14:32:03 +01:00
2020-05-19 16:58:27 +02:00
:::caution
This method has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.
:::
2020-03-18 14:32:03 +01:00
2020-05-19 16:58:27 +02:00
### `UNSAFE_ByProps`
2019-04-14 16:12:50 +02:00
2020-05-19 16:58:27 +02:00
> UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps
2019-04-14 16:12:50 +02:00
2020-05-19 16:58:27 +02:00
Returns a `ReactTestInstance` with matching props object.
2019-04-14 16:12:50 +02:00
2020-05-19 16:58:27 +02:00
:::caution
This method has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.
:::
2019-04-14 16:12:50 +02:00
</details>