@@ -21,6 +21,7 @@ title: Queries
2121 - [ ` ByLabelText ` ] ( #bylabeltext )
2222 - [ ` ByHintText ` , ` ByA11yHint ` , ` ByAccessibilityHint ` ] ( #byhinttext-bya11yhint-byaccessibilityhint )
2323 - [ ` ByRole ` ] ( #byrole )
24+ - [ Options] ( #options-1 )
2425 - [ ` ByA11yState ` , ` ByAccessibilityState ` ] ( #bya11ystate-byaccessibilitystate )
2526 - [ ` ByA11Value ` , ` ByAccessibilityValue ` ] ( #bya11value-byaccessibilityvalue )
2627- [ TextMatch] ( #textmatch )
@@ -90,6 +91,16 @@ Usually query first argument can be a **string** or a **regex**. Some queries ac
9091
9192> getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText
9293
94+ ``` ts
95+ getByText (
96+ text : TextMatch ,
97+ options ?: {
98+ exact?: boolean ;
99+ normalizer ?: (text : string ) => string ;
100+ }
101+ ): ReactTestInstance ;
102+ ```
103+
93104Returns a ` ReactTestInstance ` with matching text – may be a string or regular expression.
94105
95106This 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.
@@ -105,6 +116,16 @@ const element = screen.getByText('banana');
105116
106117> getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText
107118
119+ ``` ts
120+ getByPlaceholderText (
121+ text : TextMatch ,
122+ options ?: {
123+ exact?: boolean ;
124+ normalizer ?: (text : string ) => string ;
125+ }
126+ ): ReactTestInstance ;
127+ ```
128+
108129Returns a ` ReactTestInstance ` for a ` TextInput ` with a matching placeholder – may be a string or regular expression.
109130
110131``` jsx
@@ -118,6 +139,16 @@ const element = screen.getByPlaceholderText('username');
118139
119140> getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue
120141
142+ ``` ts
143+ getByDisplayValue (
144+ value : TextMatch ,
145+ options ?: {
146+ exact?: boolean ;
147+ normalizer ?: (text : string ) => string ;
148+ }
149+ ): ReactTestInstance ;
150+ ```
151+
121152Returns a ` ReactTestInstance ` for a ` TextInput ` with a matching display value – may be a string or regular expression.
122153
123154``` jsx
@@ -131,6 +162,16 @@ const element = screen.getByDisplayValue('username');
131162
132163> getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId
133164
165+ ``` ts
166+ getByTestId (
167+ testId : TextMatch ,
168+ options ?: {
169+ exact?: boolean ;
170+ normalizer ?: (text : string ) => string ;
171+ }
172+ ): ReactTestInstance ;
173+ ```
174+
134175Returns a ` ReactTestInstance ` with matching ` testID ` prop. ` testID ` – may be a string or a regular expression.
135176
136177``` jsx
@@ -148,6 +189,12 @@ In the spirit of [the guiding principles](https://testing-library.com/docs/guidi
148189
149190> getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText
150191
192+ ``` ts
193+ getByLabelText (
194+ text : TextMatch
195+ ): ReactTestInstance ;
196+ ```
197+
151198Returns a ` ReactTestInstance ` with matching ` accessibilityLabel ` prop.
152199
153200``` jsx
@@ -163,6 +210,12 @@ const element = screen.getByLabelText('my-label');
163210> getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint
164211> getByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText
165212
213+ ``` ts
214+ getByHintText (
215+ hint : TextMatch
216+ ): ReactTestInstance ;
217+ ```
218+
166219Returns a ` ReactTestInstance ` with matching ` accessibilityHint ` prop.
167220
168221``` jsx
@@ -180,6 +233,15 @@ Please consult [Apple guidelines on how `accessibilityHint` should be used](http
180233
181234> getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole
182235
236+ ``` ts
237+ getByRole (
238+ role : TextMatch ,
239+ option ?: {
240+ name?: TextMatch
241+ }
242+ ): ReactTestInstance ;
243+ ```
244+
183245Returns a ` ReactTestInstance ` with matching ` accessibilityRole ` prop.
184246
185247``` jsx
@@ -198,6 +260,18 @@ const element = screen.getByRole('button');
198260> getByA11yState, getAllByA11yState, queryByA11yState, queryAllByA11yState, findByA11yState, findAllByA11yState
199261> getByAccessibilityState, getAllByAccessibilityState, queryByAccessibilityState, queryAllByAccessibilityState, findByAccessibilityState, findAllByAccessibilityState
200262
263+ ``` ts
264+ getByA11yState (
265+ state : {
266+ disabled?: boolean ,
267+ selected?: boolean ,
268+ checked?: boolean | ' mixed' ,
269+ expanded?: boolean ,
270+ busy?: boolean ,
271+ }
272+ ): ReactTestInstance ;
273+ ```
274+
201275Returns a ` ReactTestInstance ` with matching ` accessibilityState ` prop.
202276
203277``` jsx
@@ -212,6 +286,17 @@ const element = screen.getByA11yState({ disabled: true });
212286> getByA11yValue, getAllByA11yValue, queryByA11yValue, queryAllByA11yValue, findByA11yValue, findAllByA11yValue
213287> getByAccessibilityValue, getAllByAccessibilityValue, queryByAccessibilityValue, queryAllByAccessibilityValue, findByAccessibilityValue, findAllByAccessibilityValue
214288
289+ ``` ts
290+ getByA11yValue (
291+ value : {
292+ min?: number ;
293+ max ?: number ;
294+ now ?: number ;
295+ text ?: string ;
296+ }
297+ ): ReactTestInstance ;
298+ ```
299+
215300Returns a ` ReactTestInstance ` with matching ` accessibilityValue ` prop.
216301
217302``` jsx
@@ -223,17 +308,12 @@ const element = screen.getByA11yValue({ min: 40 });
223308
224309## TextMatch
225310
226- Most of the query APIs take a ` TextMatch ` as an argument, which means the argument can be either a _ string_ or _ regex_ .
227-
228- ``` typescript
229- type TextMatchOptions = {
230- exact? : boolean ;
231- normalizer? : (textToNormalize : string ) => string ;
232- trim? : boolean ;
233- collapseWhitespace? : boolean ;
234- };
311+ ``` ts
312+ type TextMatch = string | RegExp ;
235313```
236314
315+ Most of the query APIs take a ` TextMatch ` as an argument, which means the argument can be either a _ string_ or _ regex_ .
316+
237317### Examples
238318
239319Given the following render:
@@ -271,7 +351,14 @@ screen.getByText(/hello world/);
271351
272352### Precision
273353
274- Queries that take a ` TextMatch ` also accept an object as the final argument that can contain options that affect the precision of string matching:
354+ ``` typescript
355+ type TextMatchOptions = {
356+ exact? : boolean ;
357+ normalizer? : (text : string ) => string ;
358+ };
359+ ```
360+
361+ Queries that take a ` TextMatch ` also accept an object as the second argument that can contain options that affect the precision of string matching:
275362
276363- ` exact ` : Defaults to ` true ` ; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.
277364 - ` exact ` has no effect on regex argument.
0 commit comments