Skip to content

Commit 28aa750

Browse files
docs: add typedefs for queries (#1175)
1 parent ffb4105 commit 28aa750

File tree

1 file changed

+97
-10
lines changed

1 file changed

+97
-10
lines changed

website/docs/Queries.md

+97-10
Original file line numberDiff line numberDiff line change
@@ -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+
93104
Returns a `ReactTestInstance` with matching text – may be a string or regular expression.
94105

95106
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');
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+
108129
Returns 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+
121152
Returns 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+
134175
Returns 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+
151198
Returns 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+
166219
Returns 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+
183245
Returns 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+
201275
Returns 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+
215300
Returns 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

239319
Given 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

Comments
 (0)