@vitest/browser 2.0.0-beta.10 → 2.0.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/jest-dom.d.ts ADDED
@@ -0,0 +1,816 @@
1
+ // Disable automatic exports.
2
+
3
+
4
+ type ARIAWidgetRole =
5
+ | "button"
6
+ | "checkbox"
7
+ | "gridcell"
8
+ | "link"
9
+ | "menuitem"
10
+ | "menuitemcheckbox"
11
+ | "menuitemradio"
12
+ | "option"
13
+ | "progressbar"
14
+ | "radio"
15
+ | "scrollbar"
16
+ | "searchbox"
17
+ | "slider"
18
+ | "spinbutton"
19
+ | "switch"
20
+ | "tab"
21
+ | "tabpanel"
22
+ | "textbox"
23
+ | "treeitem";
24
+
25
+ type ARIACompositeWidgetRole =
26
+ | "combobox"
27
+ | "grid"
28
+ | "listbox"
29
+ | "menu"
30
+ | "menubar"
31
+ | "radiogroup"
32
+ | "tablist"
33
+ | "tree"
34
+ | "treegrid";
35
+
36
+ type ARIADocumentStructureRole =
37
+ | "application"
38
+ | "article"
39
+ | "blockquote"
40
+ | "caption"
41
+ | "cell"
42
+ | "columnheader"
43
+ | "definition"
44
+ | "deletion"
45
+ | "directory"
46
+ | "document"
47
+ | "emphasis"
48
+ | "feed"
49
+ | "figure"
50
+ | "generic"
51
+ | "group"
52
+ | "heading"
53
+ | "img"
54
+ | "insertion"
55
+ | "list"
56
+ | "listitem"
57
+ | "math"
58
+ | "meter"
59
+ | "none"
60
+ | "note"
61
+ | "paragraph"
62
+ | "presentation"
63
+ | "row"
64
+ | "rowgroup"
65
+ | "rowheader"
66
+ | "separator"
67
+ | "strong"
68
+ | "subscript"
69
+ | "superscript"
70
+ | "table"
71
+ | "term"
72
+ | "time"
73
+ | "toolbar"
74
+ | "tooltip";
75
+
76
+ type ARIALandmarkRole =
77
+ | "banner"
78
+ | "complementary"
79
+ | "contentinfo"
80
+ | "form"
81
+ | "main"
82
+ | "navigation"
83
+ | "region"
84
+ | "search";
85
+
86
+ type ARIALiveRegionRole = "alert" | "log" | "marquee" | "status" | "timer";
87
+
88
+ type ARIAWindowRole = "alertdialog" | "dialog";
89
+
90
+ type ARIAUncategorizedRole = "code";
91
+
92
+ type ARIARole =
93
+ | ARIAWidgetRole
94
+ | ARIACompositeWidgetRole
95
+ | ARIADocumentStructureRole
96
+ | ARIALandmarkRole
97
+ | ARIALiveRegionRole
98
+ | ARIAWindowRole
99
+ | ARIAUncategorizedRole;
100
+
101
+ declare namespace matchers {
102
+ interface TestingLibraryMatchers<E, R> {
103
+ /**
104
+ * @deprecated
105
+ * since v1.9.0
106
+ * @description
107
+ * Assert whether a value is a DOM element, or not. Contrary to what its name implies, this matcher only checks
108
+ * that you passed to it a valid DOM element.
109
+ *
110
+ * It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element
111
+ * is contained anywhere.
112
+ * @see
113
+ * [testing-library/jest-dom#toBeInTheDom](https://github.com/testing-library/jest-dom#toBeInTheDom)
114
+ */
115
+ toBeInTheDOM(container?: HTMLElement | SVGElement): R
116
+ /**
117
+ * @description
118
+ * Assert whether an element is present in the document or not.
119
+ * @example
120
+ * <svg data-testid="svg-element"></svg>
121
+ *
122
+ * expect(queryByTestId('svg-element')).toBeInTheDocument()
123
+ * expect(queryByTestId('does-not-exist')).not.toBeInTheDocument()
124
+ * @see
125
+ * [testing-library/jest-dom#tobeinthedocument](https://github.com/testing-library/jest-dom#tobeinthedocument)
126
+ */
127
+ toBeInTheDocument(): R
128
+ /**
129
+ * @description
130
+ * This allows you to check if an element is currently visible to the user.
131
+ *
132
+ * An element is visible if **all** the following conditions are met:
133
+ * * it does not have its css property display set to none
134
+ * * it does not have its css property visibility set to either hidden or collapse
135
+ * * it does not have its css property opacity set to 0
136
+ * * its parent element is also visible (and so on up to the top of the DOM tree)
137
+ * * it does not have the hidden attribute
138
+ * * if `<details />` it has the open attribute
139
+ * @example
140
+ * <div
141
+ * data-testid="zero-opacity"
142
+ * style="opacity: 0"
143
+ * >
144
+ * Zero Opacity
145
+ * </div>
146
+ *
147
+ * <div data-testid="visible">Visible Example</div>
148
+ *
149
+ * expect(getByTestId('zero-opacity')).not.toBeVisible()
150
+ * expect(getByTestId('visible')).toBeVisible()
151
+ * @see
152
+ * [testing-library/jest-dom#tobevisible](https://github.com/testing-library/jest-dom#tobevisible)
153
+ */
154
+ toBeVisible(): R
155
+ /**
156
+ * @deprecated
157
+ * since v5.9.0
158
+ * @description
159
+ * Assert whether an element has content or not.
160
+ * @example
161
+ * <span data-testid="not-empty">
162
+ * <span data-testid="empty"></span>
163
+ * </span>
164
+ *
165
+ * expect(getByTestId('empty')).toBeEmpty()
166
+ * expect(getByTestId('not-empty')).not.toBeEmpty()
167
+ * @see
168
+ * [testing-library/jest-dom#tobeempty](https://github.com/testing-library/jest-dom#tobeempty)
169
+ */
170
+ toBeEmpty(): R
171
+ /**
172
+ * @description
173
+ * Assert whether an element has content or not.
174
+ * @example
175
+ * <span data-testid="not-empty">
176
+ * <span data-testid="empty"></span>
177
+ * </span>
178
+ *
179
+ * expect(getByTestId('empty')).toBeEmptyDOMElement()
180
+ * expect(getByTestId('not-empty')).not.toBeEmptyDOMElement()
181
+ * @see
182
+ * [testing-library/jest-dom#tobeemptydomelement](https://github.com/testing-library/jest-dom#tobeemptydomelement)
183
+ */
184
+ toBeEmptyDOMElement(): R
185
+ /**
186
+ * @description
187
+ * Allows you to check whether an element is disabled from the user's perspective.
188
+ *
189
+ * Matches if the element is a form control and the `disabled` attribute is specified on this element or the
190
+ * element is a descendant of a form element with a `disabled` attribute.
191
+ * @example
192
+ * <button
193
+ * data-testid="button"
194
+ * type="submit"
195
+ * disabled
196
+ * >
197
+ * submit
198
+ * </button>
199
+ *
200
+ * expect(getByTestId('button')).toBeDisabled()
201
+ * @see
202
+ * [testing-library/jest-dom#tobedisabled](https://github.com/testing-library/jest-dom#tobedisabled)
203
+ */
204
+ toBeDisabled(): R
205
+ /**
206
+ * @description
207
+ * Allows you to check whether an element is not disabled from the user's perspective.
208
+ *
209
+ * Works like `not.toBeDisabled()`.
210
+ *
211
+ * Use this matcher to avoid double negation in your tests.
212
+ * @example
213
+ * <button
214
+ * data-testid="button"
215
+ * type="submit"
216
+ * >
217
+ * submit
218
+ * </button>
219
+ *
220
+ * expect(getByTestId('button')).toBeEnabled()
221
+ * @see
222
+ * [testing-library/jest-dom#tobeenabled](https://github.com/testing-library/jest-dom#tobeenabled)
223
+ */
224
+ toBeEnabled(): R
225
+ /**
226
+ * @description
227
+ * Check if a form element, or the entire `form`, is currently invalid.
228
+ *
229
+ * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no
230
+ * value or a value of "true", or if the result of `checkValidity()` is false.
231
+ * @example
232
+ * <input data-testid="no-aria-invalid" />
233
+ *
234
+ * <form data-testid="invalid-form">
235
+ * <input required />
236
+ * </form>
237
+ *
238
+ * expect(getByTestId('no-aria-invalid')).not.toBeInvalid()
239
+ * expect(getByTestId('invalid-form')).toBeInvalid()
240
+ * @see
241
+ * [testing-library/jest-dom#tobeinvalid](https://github.com/testing-library/jest-dom#tobeinvalid)
242
+ */
243
+ toBeInvalid(): R
244
+ /**
245
+ * @description
246
+ * This allows you to check if a form element is currently required.
247
+ *
248
+ * An element is required if it is having a `required` or `aria-required="true"` attribute.
249
+ * @example
250
+ * <input data-testid="required-input" required />
251
+ * <div
252
+ * data-testid="supported-role"
253
+ * role="tree"
254
+ * required />
255
+ *
256
+ * expect(getByTestId('required-input')).toBeRequired()
257
+ * expect(getByTestId('supported-role')).not.toBeRequired()
258
+ * @see
259
+ * [testing-library/jest-dom#toberequired](https://github.com/testing-library/jest-dom#toberequired)
260
+ */
261
+ toBeRequired(): R
262
+ /**
263
+ * @description
264
+ * Allows you to check if a form element is currently required.
265
+ *
266
+ * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no
267
+ * value or a value of "false", or if the result of `checkValidity()` is true.
268
+ * @example
269
+ * <input data-testid="aria-invalid" aria-invalid />
270
+ *
271
+ * <form data-testid="valid-form">
272
+ * <input />
273
+ * </form>
274
+ *
275
+ * expect(getByTestId('no-aria-invalid')).not.toBeValid()
276
+ * expect(getByTestId('invalid-form')).toBeInvalid()
277
+ * @see
278
+ * [testing-library/jest-dom#tobevalid](https://github.com/testing-library/jest-dom#tobevalid)
279
+ */
280
+ toBeValid(): R
281
+ /**
282
+ * @description
283
+ * Allows you to assert whether an element contains another element as a descendant or not.
284
+ * @example
285
+ * <span data-testid="ancestor">
286
+ * <span data-testid="descendant"></span>
287
+ * </span>
288
+ *
289
+ * const ancestor = getByTestId('ancestor')
290
+ * const descendant = getByTestId('descendant')
291
+ * const nonExistantElement = getByTestId('does-not-exist')
292
+ * expect(ancestor).toContainElement(descendant)
293
+ * expect(descendant).not.toContainElement(ancestor)
294
+ * expect(ancestor).not.toContainElement(nonExistantElement)
295
+ * @see
296
+ * [testing-library/jest-dom#tocontainelement](https://github.com/testing-library/jest-dom#tocontainelement)
297
+ */
298
+ toContainElement(element: HTMLElement | SVGElement | null): R
299
+ /**
300
+ * @description
301
+ * Assert whether a string representing a HTML element is contained in another element.
302
+ * @example
303
+ * <span data-testid="parent"><span data-testid="child"></span></span>
304
+ *
305
+ * expect(getByTestId('parent')).toContainHTML('<span data-testid="child"></span>')
306
+ * @see
307
+ * [testing-library/jest-dom#tocontainhtml](https://github.com/testing-library/jest-dom#tocontainhtml)
308
+ */
309
+ toContainHTML(htmlText: string): R
310
+ /**
311
+ * @description
312
+ * Allows you to check if a given element has an attribute or not.
313
+ *
314
+ * You can also optionally check that the attribute has a specific expected value or partial match using
315
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or
316
+ * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
317
+ * @example
318
+ * <button
319
+ * data-testid="ok-button"
320
+ * type="submit"
321
+ * disabled
322
+ * >
323
+ * ok
324
+ * </button>
325
+ *
326
+ * expect(button).toHaveAttribute('disabled')
327
+ * expect(button).toHaveAttribute('type', 'submit')
328
+ * expect(button).not.toHaveAttribute('type', 'button')
329
+ * @see
330
+ * [testing-library/jest-dom#tohaveattribute](https://github.com/testing-library/jest-dom#tohaveattribute)
331
+ */
332
+ toHaveAttribute(attr: string, value?: unknown): R
333
+ /**
334
+ * @description
335
+ * Check whether the given element has certain classes within its `class` attribute.
336
+ *
337
+ * You must provide at least one class, unless you are asserting that an element does not have any classes.
338
+ * @example
339
+ * <button
340
+ * data-testid="delete-button"
341
+ * class="btn xs btn-danger"
342
+ * >
343
+ * delete item
344
+ * </button>
345
+ *
346
+ * <div data-testid="no-classes">no classes</div>
347
+ *
348
+ * const deleteButton = getByTestId('delete-button')
349
+ * const noClasses = getByTestId('no-classes')
350
+ * expect(deleteButton).toHaveClass('btn')
351
+ * expect(deleteButton).toHaveClass('btn-danger xs')
352
+ * expect(deleteButton).toHaveClass(/danger/, 'xs')
353
+ * expect(deleteButton).toHaveClass('btn xs btn-danger', {exact: true})
354
+ * expect(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true})
355
+ * expect(noClasses).not.toHaveClass()
356
+ * @see
357
+ * [testing-library/jest-dom#tohaveclass](https://github.com/testing-library/jest-dom#tohaveclass)
358
+ */
359
+ toHaveClass(...classNames: Array<string | RegExp>): R
360
+ toHaveClass(classNames: string, options?: {exact: boolean}): R
361
+ /**
362
+ * @description
363
+ * This allows you to check whether the given form element has the specified displayed value (the one the
364
+ * end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox">
365
+ * and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.
366
+ * @example
367
+ * <label for="input-example">First name</label>
368
+ * <input type="text" id="input-example" value="Luca" />
369
+ *
370
+ * <label for="textarea-example">Description</label>
371
+ * <textarea id="textarea-example">An example description here.</textarea>
372
+ *
373
+ * <label for="single-select-example">Fruit</label>
374
+ * <select id="single-select-example">
375
+ * <option value="">Select a fruit...</option>
376
+ * <option value="banana">Banana</option>
377
+ * <option value="ananas">Ananas</option>
378
+ * <option value="avocado">Avocado</option>
379
+ * </select>
380
+ *
381
+ * <label for="mutiple-select-example">Fruits</label>
382
+ * <select id="multiple-select-example" multiple>
383
+ * <option value="">Select a fruit...</option>
384
+ * <option value="banana" selected>Banana</option>
385
+ * <option value="ananas">Ananas</option>
386
+ * <option value="avocado" selected>Avocado</option>
387
+ * </select>
388
+ *
389
+ * const input = screen.getByLabelText('First name')
390
+ * const textarea = screen.getByLabelText('Description')
391
+ * const selectSingle = screen.getByLabelText('Fruit')
392
+ * const selectMultiple = screen.getByLabelText('Fruits')
393
+ *
394
+ * expect(input).toHaveDisplayValue('Luca')
395
+ * expect(textarea).toHaveDisplayValue('An example description here.')
396
+ * expect(selectSingle).toHaveDisplayValue('Select a fruit...')
397
+ * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado'])
398
+ *
399
+ * @see
400
+ * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue)
401
+ */
402
+ toHaveDisplayValue(value: string | RegExp | Array<string | RegExp>): R
403
+ /**
404
+ * @description
405
+ * Assert whether an element has focus or not.
406
+ * @example
407
+ * <div>
408
+ * <input type="text" data-testid="element-to-focus" />
409
+ * </div>
410
+ *
411
+ * const input = getByTestId('element-to-focus')
412
+ * input.focus()
413
+ * expect(input).toHaveFocus()
414
+ * input.blur()
415
+ * expect(input).not.toHaveFocus()
416
+ * @see
417
+ * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus)
418
+ */
419
+ toHaveFocus(): R
420
+ /**
421
+ * @description
422
+ * Check if a form or fieldset contains form controls for each given name, and having the specified value.
423
+ *
424
+ * Can only be invoked on a form or fieldset element.
425
+ * @example
426
+ * <form data-testid="login-form">
427
+ * <input type="text" name="username" value="jane.doe" />
428
+ * <input type="password" name="password" value="123" />
429
+ * <input type="checkbox" name="rememberMe" checked />
430
+ * <button type="submit">Sign in</button>
431
+ * </form>
432
+ *
433
+ * expect(getByTestId('login-form')).toHaveFormValues({
434
+ * username: 'jane.doe',
435
+ * rememberMe: true,
436
+ * })
437
+ * @see
438
+ * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues)
439
+ */
440
+ toHaveFormValues(expectedValues: Record<string, unknown>): R
441
+ /**
442
+ * @description
443
+ * Check if an element has specific css properties with specific values applied.
444
+ *
445
+ * Only matches if the element has *all* the expected properties applied, not just some of them.
446
+ * @example
447
+ * <button
448
+ * data-testid="submit-button"
449
+ * style="background-color: green; display: none"
450
+ * >
451
+ * submit
452
+ * </button>
453
+ *
454
+ * const button = getByTestId('submit-button')
455
+ * expect(button).toHaveStyle('background-color: green')
456
+ * expect(button).toHaveStyle({
457
+ * 'background-color': 'green',
458
+ * display: 'none'
459
+ * })
460
+ * @see
461
+ * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle)
462
+ */
463
+ toHaveStyle(css: string | Record<string, unknown>): R
464
+ /**
465
+ * @description
466
+ * Check whether the given element has a text content or not.
467
+ *
468
+ * When a string argument is passed through, it will perform a partial case-sensitive match to the element
469
+ * content.
470
+ *
471
+ * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier.
472
+ *
473
+ * If you want to match the whole content, you can use a RegExp to do it.
474
+ * @example
475
+ * <span data-testid="text-content">Text Content</span>
476
+ *
477
+ * const element = getByTestId('text-content')
478
+ * expect(element).toHaveTextContent('Content')
479
+ * // to match the whole content
480
+ * expect(element).toHaveTextContent(/^Text Content$/)
481
+ * // to use case-insentive match
482
+ * expect(element).toHaveTextContent(/content$/i)
483
+ * expect(element).not.toHaveTextContent('content')
484
+ * @see
485
+ * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent)
486
+ */
487
+ toHaveTextContent(
488
+ text: string | RegExp,
489
+ options?: {normalizeWhitespace: boolean},
490
+ ): R
491
+ /**
492
+ * @description
493
+ * Check whether the given form element has the specified value.
494
+ *
495
+ * Accepts `<input>`, `<select>`, and `<textarea>` elements with the exception of `<input type="checkbox">` and
496
+ * `<input type="radiobox">`, which can be matched only using
497
+ * [toBeChecked](https://github.com/testing-library/jest-dom#tobechecked) or
498
+ * [toHaveFormValues](https://github.com/testing-library/jest-dom#tohaveformvalues).
499
+ * @example
500
+ * <input
501
+ * type="number"
502
+ * value="5"
503
+ * data-testid="input-number" />
504
+ *
505
+ * const numberInput = getByTestId('input-number')
506
+ * expect(numberInput).toHaveValue(5)
507
+ * @see
508
+ * [testing-library/jest-dom#tohavevalue](https://github.com/testing-library/jest-dom#tohavevalue)
509
+ */
510
+ toHaveValue(value?: string | string[] | number | null): R
511
+ /**
512
+ * @description
513
+ * Assert whether the given element is checked.
514
+ *
515
+ * It accepts an `input` of type `checkbox` or `radio` and elements with a `role` of `radio` with a valid
516
+ * `aria-checked` attribute of "true" or "false".
517
+ * @example
518
+ * <input
519
+ * type="checkbox"
520
+ * checked
521
+ * data-testid="input-checkbox" />
522
+ * <input
523
+ * type="radio"
524
+ * value="foo"
525
+ * data-testid="input-radio" />
526
+ *
527
+ * const inputCheckbox = getByTestId('input-checkbox')
528
+ * const inputRadio = getByTestId('input-radio')
529
+ * expect(inputCheckbox).toBeChecked()
530
+ * expect(inputRadio).not.toBeChecked()
531
+ * @see
532
+ * [testing-library/jest-dom#tobechecked](https://github.com/testing-library/jest-dom#tobechecked)
533
+ */
534
+ toBeChecked(): R
535
+ /**
536
+ * @deprecated
537
+ * since v5.14.1
538
+ * @description
539
+ * Check the accessible description for an element.
540
+ * This allows you to check whether the given element has a description or not.
541
+ *
542
+ * An element gets its description via the
543
+ * [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
544
+ * Set this to the `id` of one or more other elements. These elements may be nested
545
+ * inside, be outside, or a sibling of the passed in element.
546
+ *
547
+ * Whitespace is normalized. Using multiple ids will
548
+ * [join the referenced elements’ text content separated by a space](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description).
549
+ *
550
+ * When a `string` argument is passed through, it will perform a whole
551
+ * case-sensitive match to the description text.
552
+ *
553
+ * To perform a case-insensitive match, you can use a `RegExp` with the `/i`
554
+ * modifier.
555
+ *
556
+ * To perform a partial match, you can pass a `RegExp` or use
557
+ * `expect.stringContaining("partial string")`.
558
+ *
559
+ * @example
560
+ * <button aria-label="Close" aria-describedby="description-close">
561
+ * X
562
+ * </button>
563
+ * <div id="description-close">
564
+ * Closing will discard any changes
565
+ * </div>
566
+ *
567
+ * <button>Delete</button>
568
+ *
569
+ * const closeButton = getByRole('button', {name: 'Close'})
570
+ *
571
+ * expect(closeButton).toHaveDescription('Closing will discard any changes')
572
+ * expect(closeButton).toHaveDescription(/will discard/) // to partially match
573
+ * expect(closeButton).toHaveDescription(expect.stringContaining('will discard')) // to partially match
574
+ * expect(closeButton).toHaveDescription(/^closing/i) // to use case-insensitive match
575
+ * expect(closeButton).not.toHaveDescription('Other description')
576
+ *
577
+ * const deleteButton = getByRole('button', {name: 'Delete'})
578
+ * expect(deleteButton).not.toHaveDescription()
579
+ * expect(deleteButton).toHaveDescription('') // Missing or empty description always becomes a blank string
580
+ * @see
581
+ * [testing-library/jest-dom#tohavedescription](https://github.com/testing-library/jest-dom#tohavedescription)
582
+ */
583
+ toHaveDescription(text?: string | RegExp | E): R
584
+ /**
585
+ * @description
586
+ * This allows to assert that an element has the expected [accessible description](https://w3c.github.io/accname/).
587
+ *
588
+ * You can pass the exact string of the expected accessible description, or you can make a
589
+ * partial match passing a regular expression, or by using either
590
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
591
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
592
+ * @example
593
+ * <a data-testid="link" href="/" aria-label="Home page" title="A link to start over">Start</a>
594
+ * <a data-testid="extra-link" href="/about" aria-label="About page">About</a>
595
+ * <img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
596
+ * <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-describedby="t1" />
597
+ * <span id="t1" role="presentation">The logo of Our Company</span>
598
+ *
599
+ * expect(getByTestId('link')).toHaveAccessibleDescription()
600
+ * expect(getByTestId('link')).toHaveAccessibleDescription('A link to start over')
601
+ * expect(getByTestId('link')).not.toHaveAccessibleDescription('Home page')
602
+ * expect(getByTestId('extra-link')).not.toHaveAccessibleDescription()
603
+ * expect(getByTestId('avatar')).not.toHaveAccessibleDescription()
604
+ * expect(getByTestId('logo')).not.toHaveAccessibleDescription('Company logo')
605
+ * expect(getByTestId('logo')).toHaveAccessibleDescription('The logo of Our Company')
606
+ * @see
607
+ * [testing-library/jest-dom#tohaveaccessibledescription](https://github.com/testing-library/jest-dom#tohaveaccessibledescription)
608
+ */
609
+ toHaveAccessibleDescription(text?: string | RegExp | E): R
610
+
611
+ /**
612
+ * @description
613
+ * This allows you to assert that an element has the expected
614
+ * [accessible error message](https://w3c.github.io/aria/#aria-errormessage).
615
+ *
616
+ * You can pass the exact string of the expected accessible error message.
617
+ * Alternatively, you can perform a partial match by passing a regular expression
618
+ * or by using either
619
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
620
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
621
+ *
622
+ * @example
623
+ * <input aria-label="Has Error" aria-invalid="true" aria-errormessage="error-message" />
624
+ * <div id="error-message" role="alert">This field is invalid</div>
625
+ *
626
+ * <input aria-label="No Error Attributes" />
627
+ * <input aria-label="Not Invalid" aria-invalid="false" aria-errormessage="error-message" />
628
+ *
629
+ * // Inputs with Valid Error Messages
630
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage()
631
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage('This field is invalid')
632
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage(/invalid/i)
633
+ * expect(
634
+ * getByRole('textbox', {name: 'Has Error'}),
635
+ * ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!')
636
+ *
637
+ * // Inputs without Valid Error Messages
638
+ * expect(
639
+ * getByRole('textbox', {name: 'No Error Attributes'}),
640
+ * ).not.toHaveAccessibleErrorMessage()
641
+ *
642
+ * expect(
643
+ * getByRole('textbox', {name: 'Not Invalid'}),
644
+ * ).not.toHaveAccessibleErrorMessage()
645
+ *
646
+ * @see
647
+ * [testing-library/jest-dom#tohaveaccessibleerrormessage](https://github.com/testing-library/jest-dom#tohaveaccessibleerrormessage)
648
+ */
649
+ toHaveAccessibleErrorMessage(text?: string | RegExp | E): R
650
+
651
+ /**
652
+ * @description
653
+ * This allows to assert that an element has the expected [accessible name](https://w3c.github.io/accname/).
654
+ * It is useful, for instance, to assert that form elements and buttons are properly labelled.
655
+ *
656
+ * You can pass the exact string of the expected accessible name, or you can make a
657
+ * partial match passing a regular expression, or by using either
658
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
659
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
660
+ * @example
661
+ * <img data-testid="img-alt" src="" alt="Test alt" />
662
+ * <img data-testid="img-empty-alt" src="" alt="" />
663
+ * <svg data-testid="svg-title"><title>Test title</title></svg>
664
+ * <button data-testid="button-img-alt"><img src="" alt="Test" /></button>
665
+ * <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
666
+ * <button data-testid="svg-button"><svg><title>Test</title></svg></p>
667
+ * <div><svg data-testid="svg-without-title"></svg></div>
668
+ * <input data-testid="input-title" title="test" />
669
+ *
670
+ * expect(getByTestId('img-alt')).toHaveAccessibleName('Test alt')
671
+ * expect(getByTestId('img-empty-alt')).not.toHaveAccessibleName()
672
+ * expect(getByTestId('svg-title')).toHaveAccessibleName('Test title')
673
+ * expect(getByTestId('button-img-alt')).toHaveAccessibleName()
674
+ * expect(getByTestId('img-paragraph')).not.toHaveAccessibleName()
675
+ * expect(getByTestId('svg-button')).toHaveAccessibleName()
676
+ * expect(getByTestId('svg-without-title')).not.toHaveAccessibleName()
677
+ * expect(getByTestId('input-title')).toHaveAccessibleName()
678
+ * @see
679
+ * [testing-library/jest-dom#tohaveaccessiblename](https://github.com/testing-library/jest-dom#tohaveaccessiblename)
680
+ */
681
+ toHaveAccessibleName(text?: string | RegExp | E): R
682
+ /**
683
+ * @description
684
+ * This allows you to assert that an element has the expected
685
+ * [role](https://www.w3.org/TR/html-aria/#docconformance).
686
+ *
687
+ * This is useful in cases where you already have access to an element via
688
+ * some query other than the role itself, and want to make additional
689
+ * assertions regarding its accessibility.
690
+ *
691
+ * The role can match either an explicit role (via the `role` attribute), or
692
+ * an implicit one via the [implicit ARIA
693
+ * semantics](https://www.w3.org/TR/html-aria/).
694
+ *
695
+ * Note: roles are matched literally by string equality, without inheriting
696
+ * from the ARIA role hierarchy. As a result, querying a superclass role
697
+ * like 'checkbox' will not include elements with a subclass role like
698
+ * 'switch'.
699
+ *
700
+ * @example
701
+ * <button data-testid="button">Continue</button>
702
+ * <div role="button" data-testid="button-explicit">Continue</button>
703
+ * <button role="switch button" data-testid="button-explicit-multiple">Continue</button>
704
+ * <a href="/about" data-testid="link">About</a>
705
+ * <a data-testid="link-invalid">Invalid link<a/>
706
+ *
707
+ * expect(getByTestId('button')).toHaveRole('button')
708
+ * expect(getByTestId('button-explicit')).toHaveRole('button')
709
+ * expect(getByTestId('button-explicit-multiple')).toHaveRole('button')
710
+ * expect(getByTestId('button-explicit-multiple')).toHaveRole('switch')
711
+ * expect(getByTestId('link')).toHaveRole('link')
712
+ * expect(getByTestId('link-invalid')).not.toHaveRole('link')
713
+ * expect(getByTestId('link-invalid')).toHaveRole('generic')
714
+ *
715
+ * @see
716
+ * [testing-library/jest-dom#tohaverole](https://github.com/testing-library/jest-dom#tohaverole)
717
+ */
718
+ toHaveRole(
719
+ // Get autocomplete for ARIARole union types, while still supporting another string
720
+ // Ref: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939
721
+ role: ARIARole | (string & {}),
722
+ ): R
723
+ /**
724
+ * @description
725
+ * This allows you to check whether the given element is partially checked.
726
+ * It accepts an input of type checkbox and elements with a role of checkbox
727
+ * with a aria-checked="mixed", or input of type checkbox with indeterminate
728
+ * set to true
729
+ *
730
+ * @example
731
+ * <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
732
+ * <input type="checkbox" checked data-testid="input-checkbox-checked" />
733
+ * <input type="checkbox" data-testid="input-checkbox-unchecked" />
734
+ * <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
735
+ * <div
736
+ * role="checkbox"
737
+ * aria-checked="false"
738
+ * data-testid="aria-checkbox-unchecked"
739
+ * />
740
+ * <input type="checkbox" data-testid="input-checkbox-indeterminate" />
741
+ *
742
+ * const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed')
743
+ * const inputCheckboxChecked = getByTestId('input-checkbox-checked')
744
+ * const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')
745
+ * const ariaCheckboxChecked = getByTestId('aria-checkbox-checked')
746
+ * const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')
747
+ * const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate')
748
+ *
749
+ * expect(ariaCheckboxMixed).toBePartiallyChecked()
750
+ * expect(inputCheckboxChecked).not.toBePartiallyChecked()
751
+ * expect(inputCheckboxUnchecked).not.toBePartiallyChecked()
752
+ * expect(ariaCheckboxChecked).not.toBePartiallyChecked()
753
+ * expect(ariaCheckboxUnchecked).not.toBePartiallyChecked()
754
+ *
755
+ * inputCheckboxIndeterminate.indeterminate = true
756
+ * expect(inputCheckboxIndeterminate).toBePartiallyChecked()
757
+ * @see
758
+ * [testing-library/jest-dom#tobepartiallychecked](https://github.com/testing-library/jest-dom#tobepartiallychecked)
759
+ */
760
+ toBePartiallyChecked(): R
761
+ /**
762
+ * @deprecated
763
+ * since v5.17.0
764
+ *
765
+ * @description
766
+ * Check whether the given element has an [ARIA error message](https://www.w3.org/TR/wai-aria/#aria-errormessage) or not.
767
+ *
768
+ * Use the `aria-errormessage` attribute to reference another element that contains
769
+ * custom error message text. Multiple ids is **NOT** allowed. Authors MUST use
770
+ * `aria-invalid` in conjunction with `aria-errormessage`. Learn more from the
771
+ * [`aria-errormessage` spec](https://www.w3.org/TR/wai-aria/#aria-errormessage).
772
+ *
773
+ * Whitespace is normalized.
774
+ *
775
+ * When a `string` argument is passed through, it will perform a whole
776
+ * case-sensitive match to the error message text.
777
+ *
778
+ * To perform a case-insensitive match, you can use a `RegExp` with the `/i`
779
+ * modifier.
780
+ *
781
+ * To perform a partial match, you can pass a `RegExp` or use
782
+ * expect.stringContaining("partial string")`.
783
+ *
784
+ * @example
785
+ * <label for="startTime"> Please enter a start time for the meeting: </label>
786
+ * <input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" />
787
+ * <span id="msgID" aria-live="assertive" style="visibility:visible">
788
+ * Invalid time: the time must be between 9:00 AM and 5:00 PM"
789
+ * </span>
790
+ *
791
+ *
792
+ * const timeInput = getByLabel('startTime')
793
+ *
794
+ * expect(timeInput).toHaveErrorMessage(
795
+ * 'Invalid time: the time must be between 9:00 AM and 5:00 PM',
796
+ * )
797
+ * expect(timeInput).toHaveErrorMessage(/invalid time/i) // to partially match
798
+ * expect(timeInput).toHaveErrorMessage(expect.stringContaining('Invalid time')) // to partially match
799
+ * expect(timeInput).not.toHaveErrorMessage('Pikachu!')
800
+ * @see
801
+ * [testing-library/jest-dom#tohaveerrormessage](https://github.com/testing-library/jest-dom#tohaveerrormessage)
802
+ */
803
+ toHaveErrorMessage(text?: string | RegExp | E): R
804
+ }
805
+ }
806
+
807
+ // Needs to extend Record<string, any> to be accepted by expect.extend()
808
+ // as it requires a string index signature.
809
+ declare const matchers: matchers.TestingLibraryMatchers<any, void> &
810
+ Record<string, any>
811
+
812
+ declare namespace matchers$1 {
813
+ export { matchers as default };
814
+ }
815
+
816
+ export { matchers$1 as default };