@@ -21,6 +21,7 @@ title: Queries
21
21
- [ ` ByLabelText ` ] ( #bylabeltext )
22
22
- [ ` ByHintText ` , ` ByA11yHint ` , ` ByAccessibilityHint ` ] ( #byhinttext-bya11yhint-byaccessibilityhint )
23
23
- [ ` ByRole ` ] ( #byrole )
24
+ - [ Options] ( #options-1 )
24
25
- [ ` ByA11yState ` , ` ByAccessibilityState ` ] ( #bya11ystate-byaccessibilitystate )
25
26
- [ ` ByA11Value ` , ` ByAccessibilityValue ` ] ( #bya11value-byaccessibilityvalue )
26
27
- [ TextMatch] ( #textmatch )
@@ -90,6 +91,16 @@ Usually query first argument can be a **string** or a **regex**. Some queries ac
90
91
91
92
> getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText
92
93
94
+ ``` ts
95
+ getByText (
96
+ text : TextMatch ,
97
+ options ?: {
98
+ exact?: boolean ;
99
+ normalizer ?: (text : string ) => string ;
100
+ }
101
+ ): ReactTestInstance ;
102
+ ```
103
+
93
104
Returns a ` ReactTestInstance ` with matching text – may be a string or regular expression.
94
105
95
106
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.
@@ -105,6 +116,16 @@ const element = screen.getByText('banana');
105
116
106
117
> getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText
107
118
119
+ ``` ts
120
+ getByPlaceholderText (
121
+ text : TextMatch ,
122
+ options ?: {
123
+ exact?: boolean ;
124
+ normalizer ?: (text : string ) => string ;
125
+ }
126
+ ): ReactTestInstance ;
127
+ ```
128
+
108
129
Returns a ` ReactTestInstance ` for a ` TextInput ` with a matching placeholder – may be a string or regular expression.
109
130
110
131
``` jsx
@@ -118,6 +139,16 @@ const element = screen.getByPlaceholderText('username');
118
139
119
140
> getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue
120
141
142
+ ``` ts
143
+ getByDisplayValue (
144
+ value : TextMatch ,
145
+ options ?: {
146
+ exact?: boolean ;
147
+ normalizer ?: (text : string ) => string ;
148
+ }
149
+ ): ReactTestInstance ;
150
+ ```
151
+
121
152
Returns a ` ReactTestInstance ` for a ` TextInput ` with a matching display value – may be a string or regular expression.
122
153
123
154
``` jsx
@@ -131,6 +162,16 @@ const element = screen.getByDisplayValue('username');
131
162
132
163
> getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId
133
164
165
+ ``` ts
166
+ getByTestId (
167
+ testId : TextMatch ,
168
+ options ?: {
169
+ exact?: boolean ;
170
+ normalizer ?: (text : string ) => string ;
171
+ }
172
+ ): ReactTestInstance ;
173
+ ```
174
+
134
175
Returns a ` ReactTestInstance ` with matching ` testID ` prop. ` testID ` – may be a string or a regular expression.
135
176
136
177
``` jsx
@@ -148,6 +189,12 @@ In the spirit of [the guiding principles](https://testing-library.com/docs/guidi
148
189
149
190
> getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText
150
191
192
+ ``` ts
193
+ getByLabelText (
194
+ text : TextMatch
195
+ ): ReactTestInstance ;
196
+ ```
197
+
151
198
Returns a ` ReactTestInstance ` with matching ` accessibilityLabel ` prop.
152
199
153
200
``` jsx
@@ -163,6 +210,12 @@ const element = screen.getByLabelText('my-label');
163
210
> getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint
164
211
> getByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText
165
212
213
+ ``` ts
214
+ getByHintText (
215
+ hint : TextMatch
216
+ ): ReactTestInstance ;
217
+ ```
218
+
166
219
Returns a ` ReactTestInstance ` with matching ` accessibilityHint ` prop.
167
220
168
221
``` jsx
@@ -180,6 +233,15 @@ Please consult [Apple guidelines on how `accessibilityHint` should be used](http
180
233
181
234
> getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole
182
235
236
+ ``` ts
237
+ getByRole (
238
+ role : TextMatch ,
239
+ option ?: {
240
+ name?: TextMatch
241
+ }
242
+ ): ReactTestInstance ;
243
+ ```
244
+
183
245
Returns a ` ReactTestInstance ` with matching ` accessibilityRole ` prop.
184
246
185
247
``` jsx
@@ -198,6 +260,18 @@ const element = screen.getByRole('button');
198
260
> getByA11yState, getAllByA11yState, queryByA11yState, queryAllByA11yState, findByA11yState, findAllByA11yState
199
261
> getByAccessibilityState, getAllByAccessibilityState, queryByAccessibilityState, queryAllByAccessibilityState, findByAccessibilityState, findAllByAccessibilityState
200
262
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
+
201
275
Returns a ` ReactTestInstance ` with matching ` accessibilityState ` prop.
202
276
203
277
``` jsx
@@ -212,6 +286,17 @@ const element = screen.getByA11yState({ disabled: true });
212
286
> getByA11yValue, getAllByA11yValue, queryByA11yValue, queryAllByA11yValue, findByA11yValue, findAllByA11yValue
213
287
> getByAccessibilityValue, getAllByAccessibilityValue, queryByAccessibilityValue, queryAllByAccessibilityValue, findByAccessibilityValue, findAllByAccessibilityValue
214
288
289
+ ``` ts
290
+ getByA11yValue (
291
+ value : {
292
+ min?: number ;
293
+ max ?: number ;
294
+ now ?: number ;
295
+ text ?: string ;
296
+ }
297
+ ): ReactTestInstance ;
298
+ ```
299
+
215
300
Returns a ` ReactTestInstance ` with matching ` accessibilityValue ` prop.
216
301
217
302
``` jsx
@@ -223,17 +308,12 @@ const element = screen.getByA11yValue({ min: 40 });
223
308
224
309
## TextMatch
225
310
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 ;
235
313
```
236
314
315
+ Most of the query APIs take a ` TextMatch ` as an argument, which means the argument can be either a _ string_ or _ regex_ .
316
+
237
317
### Examples
238
318
239
319
Given the following render:
@@ -271,7 +351,14 @@ screen.getByText(/hello world/);
271
351
272
352
### Precision
273
353
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:
275
362
276
363
- ` exact ` : Defaults to ` true ` ; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.
277
364
- ` exact ` has no effect on regex argument.
0 commit comments