@najemi-software/vitest-dom 0.13.0 → 0.14.0

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.
Files changed (94) hide show
  1. package/dist/extend-expect.d.ts +1 -3
  2. package/dist/extend-expect.js +2 -6
  3. package/dist/extend-expect.js.map +1 -1
  4. package/dist/matchers/css-parse.d.ts +30 -0
  5. package/dist/matchers/css-parse.js +514 -0
  6. package/dist/matchers/css-parse.js.map +1 -0
  7. package/dist/matchers/to-be-checked.d.ts +2 -0
  8. package/dist/matchers/to-be-checked.js +52 -0
  9. package/dist/matchers/to-be-checked.js.map +1 -0
  10. package/dist/matchers/to-be-disabled.d.ts +3 -0
  11. package/dist/matchers/to-be-disabled.js +74 -0
  12. package/dist/matchers/to-be-disabled.js.map +1 -0
  13. package/dist/matchers/to-be-empty-dom-element.d.ts +2 -0
  14. package/dist/matchers/to-be-empty-dom-element.js +31 -0
  15. package/dist/matchers/to-be-empty-dom-element.js.map +1 -0
  16. package/dist/matchers/to-be-empty.d.ts +3 -0
  17. package/dist/matchers/to-be-empty.js +18 -0
  18. package/dist/matchers/to-be-empty.js.map +1 -0
  19. package/dist/matchers/to-be-in-the-document.d.ts +2 -0
  20. package/dist/matchers/to-be-in-the-document.js +24 -0
  21. package/dist/matchers/to-be-in-the-document.js.map +1 -0
  22. package/dist/matchers/to-be-in-the-dom.d.ts +3 -0
  23. package/dist/matchers/to-be-in-the-dom.js +23 -0
  24. package/dist/matchers/to-be-in-the-dom.js.map +1 -0
  25. package/dist/matchers/to-be-invalid.d.ts +3 -0
  26. package/dist/matchers/to-be-invalid.js +50 -0
  27. package/dist/matchers/to-be-invalid.js.map +1 -0
  28. package/dist/matchers/to-be-partially-checked.d.ts +2 -0
  29. package/dist/matchers/to-be-partially-checked.js +36 -0
  30. package/dist/matchers/to-be-partially-checked.js.map +1 -0
  31. package/dist/matchers/to-be-required.d.ts +2 -0
  32. package/dist/matchers/to-be-required.js +40 -0
  33. package/dist/matchers/to-be-required.js.map +1 -0
  34. package/dist/matchers/to-be-visible.d.ts +2 -0
  35. package/dist/matchers/to-be-visible.js +46 -0
  36. package/dist/matchers/to-be-visible.js.map +1 -0
  37. package/dist/matchers/to-contain-element.d.ts +2 -0
  38. package/dist/matchers/to-contain-element.js +19 -0
  39. package/dist/matchers/to-contain-element.js.map +1 -0
  40. package/dist/matchers/to-contain-html.d.ts +2 -0
  41. package/dist/matchers/to-contain-html.js +25 -0
  42. package/dist/matchers/to-contain-html.js.map +1 -0
  43. package/dist/matchers/to-have-accessible-description.d.ts +4 -0
  44. package/dist/matchers/to-have-accessible-description.js +28 -0
  45. package/dist/matchers/to-have-accessible-description.js.map +1 -0
  46. package/dist/matchers/to-have-accessible-errormessage.d.ts +2 -0
  47. package/dist/matchers/to-have-accessible-errormessage.js +48 -0
  48. package/dist/matchers/to-have-accessible-errormessage.js.map +1 -0
  49. package/dist/matchers/to-have-accessible-name.d.ts +3 -0
  50. package/dist/matchers/to-have-accessible-name.js +27 -0
  51. package/dist/matchers/to-have-accessible-name.js.map +1 -0
  52. package/dist/matchers/to-have-attribute.d.ts +2 -0
  53. package/dist/matchers/to-have-attribute.js +34 -0
  54. package/dist/matchers/to-have-attribute.js.map +1 -0
  55. package/dist/matchers/to-have-class.d.ts +2 -0
  56. package/dist/matchers/to-have-class.js +56 -0
  57. package/dist/matchers/to-have-class.js.map +1 -0
  58. package/dist/matchers/to-have-description.d.ts +4 -0
  59. package/dist/matchers/to-have-description.js +30 -0
  60. package/dist/matchers/to-have-description.js.map +1 -0
  61. package/dist/matchers/to-have-display-value.d.ts +2 -0
  62. package/dist/matchers/to-have-display-value.js +31 -0
  63. package/dist/matchers/to-have-display-value.js.map +1 -0
  64. package/dist/matchers/to-have-errormessage.d.ts +3 -0
  65. package/dist/matchers/to-have-errormessage.js +39 -0
  66. package/dist/matchers/to-have-errormessage.js.map +1 -0
  67. package/dist/matchers/to-have-focus.d.ts +2 -0
  68. package/dist/matchers/to-have-focus.js +22 -0
  69. package/dist/matchers/to-have-focus.js.map +1 -0
  70. package/dist/matchers/to-have-form-values.d.ts +2 -0
  71. package/dist/matchers/to-have-form-values.js +67 -0
  72. package/dist/matchers/to-have-form-values.js.map +1 -0
  73. package/dist/matchers/to-have-style.d.ts +2 -0
  74. package/dist/matchers/to-have-style.js +59 -0
  75. package/dist/matchers/to-have-style.js.map +1 -0
  76. package/dist/matchers/to-have-text-content.d.ts +4 -0
  77. package/dist/matchers/to-have-text-content.js +18 -0
  78. package/dist/matchers/to-have-text-content.js.map +1 -0
  79. package/dist/matchers/to-have-value.d.ts +2 -0
  80. package/dist/matchers/to-have-value.js +27 -0
  81. package/dist/matchers/to-have-value.js.map +1 -0
  82. package/dist/matchers/types.d.ts +13 -0
  83. package/dist/matchers/types.js +2 -0
  84. package/dist/matchers/types.js.map +1 -0
  85. package/dist/matchers/utils.d.ts +43 -0
  86. package/dist/matchers/utils.js +217 -0
  87. package/dist/matchers/utils.js.map +1 -0
  88. package/dist/matchers.d.ts +682 -83
  89. package/dist/matchers.js +25 -56
  90. package/dist/matchers.js.map +1 -1
  91. package/package.json +9 -5
  92. package/dist/chunk-DARZWRGS.js +0 -1546
  93. package/dist/chunk-DARZWRGS.js.map +0 -1
  94. package/dist/matchers-CEKfObS0.d.ts +0 -661
@@ -1,84 +1,683 @@
1
- import "vitest";
2
- export { T as TestingLibraryMatchers } from './matchers-CEKfObS0.js';
3
- import { expect } from 'vitest';
4
-
5
- interface MatcherResult {
6
- pass: boolean;
7
- message(): string;
8
- actual?: unknown;
9
- expected?: unknown;
1
+ import { toBeChecked } from "./matchers/to-be-checked.js";
2
+ import { toBeDisabled, toBeEnabled } from "./matchers/to-be-disabled.js";
3
+ import { toBeEmptyDOMElement } from "./matchers/to-be-empty-dom-element.js";
4
+ import { toBeEmpty } from "./matchers/to-be-empty.js";
5
+ import { toBeInTheDocument } from "./matchers/to-be-in-the-document.js";
6
+ import { toBeInTheDOM } from "./matchers/to-be-in-the-dom.js";
7
+ import { toBeInvalid, toBeValid } from "./matchers/to-be-invalid.js";
8
+ import { toBePartiallyChecked } from "./matchers/to-be-partially-checked.js";
9
+ import { toBeRequired } from "./matchers/to-be-required.js";
10
+ import { toBeVisible } from "./matchers/to-be-visible.js";
11
+ import { toContainElement } from "./matchers/to-contain-element.js";
12
+ import { toContainHTML } from "./matchers/to-contain-html.js";
13
+ import { toHaveAccessibleDescription } from "./matchers/to-have-accessible-description.js";
14
+ import { toHaveAccessibleName } from "./matchers/to-have-accessible-name.js";
15
+ import { toHaveAttribute } from "./matchers/to-have-attribute.js";
16
+ import { toHaveClass } from "./matchers/to-have-class.js";
17
+ import { toHaveDescription } from "./matchers/to-have-description.js";
18
+ import { toHaveDisplayValue } from "./matchers/to-have-display-value.js";
19
+ import { toHaveErrorMessage } from "./matchers/to-have-errormessage.js";
20
+ import { toHaveFocus } from "./matchers/to-have-focus.js";
21
+ import { toHaveFormValues } from "./matchers/to-have-form-values.js";
22
+ import { toHaveStyle } from "./matchers/to-have-style.js";
23
+ import { toHaveTextContent } from "./matchers/to-have-text-content.js";
24
+ import { toHaveValue } from "./matchers/to-have-value.js";
25
+ export { toBeInTheDOM, toBeInTheDocument, toBeEmpty, toBeEmptyDOMElement, toContainElement, toContainHTML, toHaveTextContent, toHaveAccessibleDescription, toHaveAccessibleName, toHaveAttribute, toHaveClass, toHaveStyle, toHaveFocus, toHaveFormValues, toBeVisible, toBeDisabled, toBeEnabled, toBeRequired, toBeInvalid, toBeValid, toHaveValue, toHaveDisplayValue, toBeChecked, toBePartiallyChecked, toHaveDescription, toHaveErrorMessage, };
26
+ export interface TestingLibraryMatchers<E, R> extends Record<string, any> {
27
+ /**
28
+ * @deprecated
29
+ * since v1.9.0
30
+ * @description
31
+ * Assert whether a value is a DOM element, or not. Contrary to what its name
32
+ * implies, this matcher only checks that you passed to it a valid DOM
33
+ * element.
34
+ *
35
+ * It does not have a clear definition of what "the DOM" is. Therefore, it
36
+ * does not check whether that element is contained anywhere.
37
+ * @see [testing-library/jest-dom#toBeInTheDom](https://github.com/testing-library/jest-dom#toBeInTheDom)
38
+ */
39
+ toBeInTheDOM(container?: HTMLElement | SVGElement): R;
40
+ /**
41
+ * @description
42
+ * Assert whether an element is present in the document or not.
43
+ * @example
44
+ * <svg data-testid="svg-element"></svg>
45
+ *
46
+ * expect(queryByTestId('svg-element')).toBeInTheDocument()
47
+ * expect(queryByTestId('does-not-exist')).not.toBeInTheDocument()
48
+ * @see
49
+ * [testing-library/jest-dom#tobeinthedocument](https://github.com/testing-library/jest-dom#tobeinthedocument)
50
+ */
51
+ toBeInTheDocument(): R;
52
+ /**
53
+ * @description
54
+ * This allows you to check if an element is currently visible to the user.
55
+ *
56
+ * An element is visible if **all** the following conditions are met:
57
+ * * it does not have its css property display set to none
58
+ * * it does not have its css property visibility set to either hidden or collapse
59
+ * * it does not have its css property opacity set to 0
60
+ * * its parent element is also visible (and so on up to the top of the DOM tree)
61
+ * * it does not have the hidden attribute
62
+ * * if `<details />` it has the open attribute
63
+ * @example
64
+ * <div
65
+ * data-testid="zero-opacity"
66
+ * style="opacity: 0"
67
+ * >
68
+ * Zero Opacity
69
+ * </div>
70
+ *
71
+ * <div data-testid="visible">Visible Example</div>
72
+ *
73
+ * expect(getByTestId('zero-opacity')).not.toBeVisible()
74
+ * expect(getByTestId('visible')).toBeVisible()
75
+ * @see
76
+ * [testing-library/jest-dom#tobevisible](https://github.com/testing-library/jest-dom#tobevisible)
77
+ */
78
+ toBeVisible(): R;
79
+ /**
80
+ * @deprecated
81
+ * since v5.9.0
82
+ * @description
83
+ * Assert whether an element has content or not.
84
+ * @example
85
+ * <span data-testid="not-empty">
86
+ * <span data-testid="empty"></span>
87
+ * </span>
88
+ *
89
+ * expect(getByTestId('empty')).toBeEmpty()
90
+ * expect(getByTestId('not-empty')).not.toBeEmpty()
91
+ * @see
92
+ * [testing-library/jest-dom#tobeempty](https://github.com/testing-library/jest-dom#tobeempty)
93
+ */
94
+ toBeEmpty(): R;
95
+ /**
96
+ * @description
97
+ * Assert whether an element has content or not.
98
+ * @example
99
+ * <span data-testid="not-empty">
100
+ * <span data-testid="empty"></span>
101
+ * </span>
102
+ *
103
+ * expect(getByTestId('empty')).toBeEmptyDOMElement()
104
+ * expect(getByTestId('not-empty')).not.toBeEmptyDOMElement()
105
+ * @see
106
+ * [testing-library/jest-dom#tobeemptydomelement](https://github.com/testing-library/jest-dom#tobeemptydomelement)
107
+ */
108
+ toBeEmptyDOMElement(): R;
109
+ /**
110
+ * @description
111
+ * Allows you to check whether an element is disabled from the user's perspective.
112
+ *
113
+ * Matches if the element is a form control and the `disabled` attribute is specified on this element or the
114
+ * element is a descendant of a form element with a `disabled` attribute.
115
+ * @example
116
+ * <button
117
+ * data-testid="button"
118
+ * type="submit"
119
+ * disabled
120
+ * >
121
+ * submit
122
+ * </button>
123
+ *
124
+ * expect(getByTestId('button')).toBeDisabled()
125
+ * @see
126
+ * [testing-library/jest-dom#tobedisabled](https://github.com/testing-library/jest-dom#tobedisabled)
127
+ */
128
+ toBeDisabled(): R;
129
+ /**
130
+ * @description
131
+ * Allows you to check whether an element is not disabled from the user's perspective.
132
+ *
133
+ * Works like `not.toBeDisabled()`.
134
+ *
135
+ * Use this matcher to avoid double negation in your tests.
136
+ * @example
137
+ * <button
138
+ * data-testid="button"
139
+ * type="submit"
140
+ * >
141
+ * submit
142
+ * </button>
143
+ *
144
+ * expect(getByTestId('button')).toBeEnabled()
145
+ * @see
146
+ * [testing-library/jest-dom#tobeenabled](https://github.com/testing-library/jest-dom#tobeenabled)
147
+ */
148
+ toBeEnabled(): R;
149
+ /**
150
+ * @description
151
+ * Check if a form element, or the entire `form`, is currently invalid.
152
+ *
153
+ * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no
154
+ * value or a value of "true", or if the result of `checkValidity()` is false.
155
+ * @example
156
+ * <input data-testid="no-aria-invalid" />
157
+ *
158
+ * <form data-testid="invalid-form">
159
+ * <input required />
160
+ * </form>
161
+ *
162
+ * expect(getByTestId('no-aria-invalid')).not.toBeInvalid()
163
+ * expect(getByTestId('invalid-form')).toBeInvalid()
164
+ * @see
165
+ * [testing-library/jest-dom#tobeinvalid](https://github.com/testing-library/jest-dom#tobeinvalid)
166
+ */
167
+ toBeInvalid(): R;
168
+ /**
169
+ * @description
170
+ * This allows you to check if a form element is currently required.
171
+ *
172
+ * An element is required if it is having a `required` or `aria-required="true"` attribute.
173
+ * @example
174
+ * <input data-testid="required-input" required />
175
+ * <div
176
+ * data-testid="supported-role"
177
+ * role="tree"
178
+ * required />
179
+ *
180
+ * expect(getByTestId('required-input')).toBeRequired()
181
+ * expect(getByTestId('supported-role')).not.toBeRequired()
182
+ * @see
183
+ * [testing-library/jest-dom#toberequired](https://github.com/testing-library/jest-dom#toberequired)
184
+ */
185
+ toBeRequired(): R;
186
+ /**
187
+ * @description
188
+ * Allows you to check if a form element is currently required.
189
+ *
190
+ * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no
191
+ * value or a value of "false", or if the result of `checkValidity()` is true.
192
+ * @example
193
+ * <input data-testid="aria-invalid" aria-invalid />
194
+ *
195
+ * <form data-testid="valid-form">
196
+ * <input />
197
+ * </form>
198
+ *
199
+ * expect(getByTestId('no-aria-invalid')).not.toBeValid()
200
+ * expect(getByTestId('invalid-form')).toBeInvalid()
201
+ * @see
202
+ * [testing-library/jest-dom#tobevalid](https://github.com/testing-library/jest-dom#tobevalid)
203
+ */
204
+ toBeValid(): R;
205
+ /**
206
+ * @description
207
+ * Allows you to assert whether an element contains another element as a descendant or not.
208
+ * @example
209
+ * <span data-testid="ancestor">
210
+ * <span data-testid="descendant"></span>
211
+ * </span>
212
+ *
213
+ * const ancestor = getByTestId('ancestor')
214
+ * const descendant = getByTestId('descendant')
215
+ * const nonExistantElement = getByTestId('does-not-exist')
216
+ * expect(ancestor).toContainElement(descendant)
217
+ * expect(descendant).not.toContainElement(ancestor)
218
+ * expect(ancestor).not.toContainElement(nonExistantElement)
219
+ * @see
220
+ * [testing-library/jest-dom#tocontainelement](https://github.com/testing-library/jest-dom#tocontainelement)
221
+ */
222
+ toContainElement(element: HTMLElement | SVGElement | null): R;
223
+ /**
224
+ * @description
225
+ * Assert whether a string representing a HTML element is contained in another element.
226
+ * @example
227
+ * <span data-testid="parent"><span data-testid="child"></span></span>
228
+ *
229
+ * expect(getByTestId('parent')).toContainHTML('<span data-testid="child"></span>')
230
+ * @see
231
+ * [testing-library/jest-dom#tocontainhtml](https://github.com/testing-library/jest-dom#tocontainhtml)
232
+ */
233
+ toContainHTML(htmlText: string): R;
234
+ /**
235
+ * @description
236
+ * Allows you to check if a given element has an attribute or not.
237
+ *
238
+ * You can also optionally check that the attribute has a specific expected value or partial match using
239
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or
240
+ * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
241
+ * @example
242
+ * <button
243
+ * data-testid="ok-button"
244
+ * type="submit"
245
+ * disabled
246
+ * >
247
+ * ok
248
+ * </button>
249
+ *
250
+ * expect(button).toHaveAttribute('disabled')
251
+ * expect(button).toHaveAttribute('type', 'submit')
252
+ * expect(button).not.toHaveAttribute('type', 'button')
253
+ * @see
254
+ * [testing-library/jest-dom#tohaveattribute](https://github.com/testing-library/jest-dom#tohaveattribute)
255
+ */
256
+ toHaveAttribute(attr: string, value?: unknown): R;
257
+ /**
258
+ * @description
259
+ * Check whether the given element has certain classes within its `class` attribute.
260
+ *
261
+ * You must provide at least one class, unless you are asserting that an element does not have any classes.
262
+ * @example
263
+ * <button
264
+ * data-testid="delete-button"
265
+ * class="btn xs btn-danger"
266
+ * >
267
+ * delete item
268
+ * </button>
269
+ *
270
+ * <div data-testid="no-classes">no classes</div>
271
+ *
272
+ * const deleteButton = getByTestId('delete-button')
273
+ * const noClasses = getByTestId('no-classes')
274
+ * expect(deleteButton).toHaveClass('btn')
275
+ * expect(deleteButton).toHaveClass('btn-danger xs')
276
+ * expect(deleteButton).toHaveClass('btn xs btn-danger', {exact: true})
277
+ * expect(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true})
278
+ * expect(noClasses).not.toHaveClass()
279
+ * @see
280
+ * [testing-library/jest-dom#tohaveclass](https://github.com/testing-library/jest-dom#tohaveclass)
281
+ */
282
+ toHaveClass(...classNames: string[]): R;
283
+ toHaveClass(classNames: string, options?: {
284
+ exact: boolean;
285
+ }): R;
286
+ /**
287
+ * @description
288
+ * This allows you to check whether the given form element has the specified displayed value (the one the
289
+ * end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox">
290
+ * and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.
291
+ * @example
292
+ * <label for="input-example">First name</label>
293
+ * <input type="text" id="input-example" value="Luca" />
294
+ *
295
+ * <label for="textarea-example">Description</label>
296
+ * <textarea id="textarea-example">An example description here.</textarea>
297
+ *
298
+ * <label for="single-select-example">Fruit</label>
299
+ * <select id="single-select-example">
300
+ * <option value="">Select a fruit...</option>
301
+ * <option value="banana">Banana</option>
302
+ * <option value="ananas">Ananas</option>
303
+ * <option value="avocado">Avocado</option>
304
+ * </select>
305
+ *
306
+ * <label for="mutiple-select-example">Fruits</label>
307
+ * <select id="multiple-select-example" multiple>
308
+ * <option value="">Select a fruit...</option>
309
+ * <option value="banana" selected>Banana</option>
310
+ * <option value="ananas">Ananas</option>
311
+ * <option value="avocado" selected>Avocado</option>
312
+ * </select>
313
+ *
314
+ * const input = screen.getByLabelText('First name')
315
+ * const textarea = screen.getByLabelText('Description')
316
+ * const selectSingle = screen.getByLabelText('Fruit')
317
+ * const selectMultiple = screen.getByLabelText('Fruits')
318
+ *
319
+ * expect(input).toHaveDisplayValue('Luca')
320
+ * expect(textarea).toHaveDisplayValue('An example description here.')
321
+ * expect(selectSingle).toHaveDisplayValue('Select a fruit...')
322
+ * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado'])
323
+ *
324
+ * @see
325
+ * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue)
326
+ */
327
+ toHaveDisplayValue(value: string | RegExp | Array<string | RegExp>): R;
328
+ /**
329
+ * @description
330
+ * Assert whether an element has focus or not.
331
+ * @example
332
+ * <div>
333
+ * <input type="text" data-testid="element-to-focus" />
334
+ * </div>
335
+ *
336
+ * const input = getByTestId('element-to-focus')
337
+ * input.focus()
338
+ * expect(input).toHaveFocus()
339
+ * input.blur()
340
+ * expect(input).not.toHaveFocus()
341
+ * @see
342
+ * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus)
343
+ */
344
+ toHaveFocus(): R;
345
+ /**
346
+ * @description
347
+ * Check if a form or fieldset contains form controls for each given name, and having the specified value.
348
+ *
349
+ * Can only be invoked on a form or fieldset element.
350
+ * @example
351
+ * <form data-testid="login-form">
352
+ * <input type="text" name="username" value="jane.doe" />
353
+ * <input type="password" name="password" value="123" />
354
+ * <input type="checkbox" name="rememberMe" checked />
355
+ * <button type="submit">Sign in</button>
356
+ * </form>
357
+ *
358
+ * expect(getByTestId('login-form')).toHaveFormValues({
359
+ * username: 'jane.doe',
360
+ * rememberMe: true,
361
+ * })
362
+ * @see
363
+ * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues)
364
+ */
365
+ toHaveFormValues(expectedValues: Record<string, unknown>): R;
366
+ /**
367
+ * @description
368
+ * Check if an element has specific css properties with specific values applied.
369
+ *
370
+ * Only matches if the element has *all* the expected properties applied, not just some of them.
371
+ * @example
372
+ * <button
373
+ * data-test-id="submit-button"
374
+ * style="background-color: green; display: none"
375
+ * >
376
+ * submit
377
+ * </button>
378
+ *
379
+ * const button = getByTestId('submit-button')
380
+ * expect(button).toHaveStyle('background-color: green')
381
+ * expect(button).toHaveStyle({
382
+ * 'background-color': 'green',
383
+ * display: 'none'
384
+ * })
385
+ * @see
386
+ * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle)
387
+ */
388
+ toHaveStyle(css: string | Record<string, unknown>): R;
389
+ /**
390
+ * @description
391
+ * Check whether the given element has a text content or not.
392
+ *
393
+ * When a string argument is passed through, it will perform a partial case-sensitive match to the element
394
+ * content.
395
+ *
396
+ * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier.
397
+ *
398
+ * If you want to match the whole content, you can use a RegExp to do it.
399
+ * @example
400
+ * <span data-testid="text-content">Text Content</span>
401
+ *
402
+ * const element = getByTestId('text-content')
403
+ * expect(element).toHaveTextContent('Content')
404
+ * // to match the whole content
405
+ * expect(element).toHaveTextContent(/^Text Content$/)
406
+ * // to use case-insentive match
407
+ * expect(element).toHaveTextContent(/content$/i)
408
+ * expect(element).not.toHaveTextContent('content')
409
+ * @see
410
+ * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent)
411
+ */
412
+ toHaveTextContent(text: string | RegExp, options?: {
413
+ normalizeWhitespace: boolean;
414
+ }): R;
415
+ /**
416
+ * @description
417
+ * Check whether the given form element has the specified value.
418
+ *
419
+ * Accepts `<input>`, `<select>`, and `<textarea>` elements with the exception of `<input type="checkbox">` and
420
+ * `<input type="radiobox">`, which can be matched only using
421
+ * [toBeChecked](https://github.com/testing-library/jest-dom#tobechecked) or
422
+ * [toHaveFormValues](https://github.com/testing-library/jest-dom#tohaveformvalues).
423
+ * @example
424
+ * <input
425
+ * type="number"
426
+ * value="5"
427
+ * data-testid="input-number" />
428
+ *
429
+ * const numberInput = getByTestId('input-number')
430
+ * expect(numberInput).toHaveValue(5)
431
+ * @see
432
+ * [testing-library/jest-dom#tohavevalue](https://github.com/testing-library/jest-dom#tohavevalue)
433
+ */
434
+ toHaveValue(value?: string | string[] | number | null): R;
435
+ /**
436
+ * @description
437
+ * Assert whether the given element is checked.
438
+ *
439
+ * It accepts an `input` of type `checkbox` or `radio` and elements with a `role` of `radio` with a valid
440
+ * `aria-checked` attribute of "true" or "false".
441
+ * @example
442
+ * <input
443
+ * type="checkbox"
444
+ * checked
445
+ * data-testid="input-checkbox" />
446
+ * <input
447
+ * type="radio"
448
+ * value="foo"
449
+ * data-testid="input-radio" />
450
+ *
451
+ * const inputCheckbox = getByTestId('input-checkbox')
452
+ * const inputRadio = getByTestId('input-radio')
453
+ * expect(inputCheckbox).toBeChecked()
454
+ * expect(inputRadio).not.toBeChecked()
455
+ * @see
456
+ * [testing-library/jest-dom#tobechecked](https://github.com/testing-library/jest-dom#tobechecked)
457
+ */
458
+ toBeChecked(): R;
459
+ /**
460
+ * @deprecated
461
+ * since v5.14.1
462
+ * @description
463
+ * Check the accessible description for an element.
464
+ * This allows you to check whether the given element has a description or not.
465
+ *
466
+ * An element gets its description via the
467
+ * [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
468
+ * Set this to the `id` of one or more other elements. These elements may be nested
469
+ * inside, be outside, or a sibling of the passed in element.
470
+ *
471
+ * Whitespace is normalized. Using multiple ids will
472
+ * [join the referenced elements’ text content separated by a space](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description).
473
+ *
474
+ * When a `string` argument is passed through, it will perform a whole
475
+ * case-sensitive match to the description text.
476
+ *
477
+ * To perform a case-insensitive match, you can use a `RegExp` with the `/i`
478
+ * modifier.
479
+ *
480
+ * To perform a partial match, you can pass a `RegExp` or use
481
+ * `expect.stringContaining("partial string")`.
482
+ *
483
+ * @example
484
+ * <button aria-label="Close" aria-describedby="description-close">
485
+ * X
486
+ * </button>
487
+ * <div id="description-close">
488
+ * Closing will discard any changes
489
+ * </div>
490
+ *
491
+ * <button>Delete</button>
492
+ *
493
+ * const closeButton = getByRole('button', {name: 'Close'})
494
+ *
495
+ * expect(closeButton).toHaveDescription('Closing will discard any changes')
496
+ * expect(closeButton).toHaveDescription(/will discard/) // to partially match
497
+ * expect(closeButton).toHaveDescription(expect.stringContaining('will discard')) // to partially match
498
+ * expect(closeButton).toHaveDescription(/^closing/i) // to use case-insensitive match
499
+ * expect(closeButton).not.toHaveDescription('Other description')
500
+ *
501
+ * const deleteButton = getByRole('button', {name: 'Delete'})
502
+ * expect(deleteButton).not.toHaveDescription()
503
+ * expect(deleteButton).toHaveDescription('') // Missing or empty description always becomes a blank string
504
+ * @see
505
+ * [testing-library/jest-dom#tohavedescription](https://github.com/testing-library/jest-dom#tohavedescription)
506
+ */
507
+ toHaveDescription(text?: string | RegExp | E): R;
508
+ /**
509
+ * @description
510
+ * This allows to assert that an element has the expected [accessible description](https://w3c.github.io/accname/).
511
+ *
512
+ * You can pass the exact string of the expected accessible description, or you can make a
513
+ * partial match passing a regular expression, or by using either
514
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
515
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
516
+ * @example
517
+ * <a data-testid="link" href="/" aria-label="Home page" title="A link to start over">Start</a>
518
+ * <a data-testid="extra-link" href="/about" aria-label="About page">About</a>
519
+ * <img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
520
+ * <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-describedby="t1" />
521
+ * <span id="t1" role="presentation">The logo of Our Company</span>
522
+ *
523
+ * expect(getByTestId('link')).toHaveAccessibleDescription()
524
+ * expect(getByTestId('link')).toHaveAccessibleDescription('A link to start over')
525
+ * expect(getByTestId('link')).not.toHaveAccessibleDescription('Home page')
526
+ * expect(getByTestId('extra-link')).not.toHaveAccessibleDescription()
527
+ * expect(getByTestId('avatar')).not.toHaveAccessibleDescription()
528
+ * expect(getByTestId('logo')).not.toHaveAccessibleDescription('Company logo')
529
+ * expect(getByTestId('logo')).toHaveAccessibleDescription('The logo of Our Company')
530
+ * @see
531
+ * [testing-library/jest-dom#tohaveaccessibledescription](https://github.com/testing-library/jest-dom#tohaveaccessibledescription)
532
+ */
533
+ toHaveAccessibleDescription(text?: string | RegExp | E): R;
534
+ /**
535
+ * @description
536
+ * This allows you to assert that an element has the expected
537
+ * [accessible error message](https://w3c.github.io/aria/#aria-errormessage).
538
+ *
539
+ * You can pass the exact string of the expected accessible error message.
540
+ * Alternatively, you can perform a partial match by passing a regular expression
541
+ * or by using either
542
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
543
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
544
+ *
545
+ * @example
546
+ * <input aria-label="Has Error" aria-invalid="true" aria-errormessage="error-message" />
547
+ * <div id="error-message" role="alert">This field is invalid</div>
548
+ *
549
+ * <input aria-label="No Error Attributes" />
550
+ * <input aria-label="Not Invalid" aria-invalid="false" aria-errormessage="error-message" />
551
+ *
552
+ * // Inputs with Valid Error Messages
553
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage()
554
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage('This field is invalid')
555
+ * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage(/invalid/i)
556
+ * expect(
557
+ * getByRole('textbox', {name: 'Has Error'}),
558
+ * ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!')
559
+ *
560
+ * // Inputs without Valid Error Messages
561
+ * expect(
562
+ * getByRole('textbox', {name: 'No Error Attributes'}),
563
+ * ).not.toHaveAccessibleErrorMessage()
564
+ *
565
+ * expect(
566
+ * getByRole('textbox', {name: 'Not Invalid'}),
567
+ * ).not.toHaveAccessibleErrorMessage()
568
+ *
569
+ * @see
570
+ * [testing-library/jest-dom#tohaveaccessibleerrormessage](https://github.com/testing-library/jest-dom#tohaveaccessibleerrormessage)
571
+ */
572
+ toHaveAccessibleErrorMessage(text?: string | RegExp | E): R;
573
+ /**
574
+ * @description
575
+ * This allows to assert that an element has the expected [accessible name](https://w3c.github.io/accname/).
576
+ * It is useful, for instance, to assert that form elements and buttons are properly labelled.
577
+ *
578
+ * You can pass the exact string of the expected accessible name, or you can make a
579
+ * partial match passing a regular expression, or by using either
580
+ * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
581
+ * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
582
+ * @example
583
+ * <img data-testid="img-alt" src="" alt="Test alt" />
584
+ * <img data-testid="img-empty-alt" src="" alt="" />
585
+ * <svg data-testid="svg-title"><title>Test title</title></svg>
586
+ * <button data-testid="button-img-alt"><img src="" alt="Test" /></button>
587
+ * <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
588
+ * <button data-testid="svg-button"><svg><title>Test</title></svg></p>
589
+ * <div><svg data-testid="svg-without-title"></svg></div>
590
+ * <input data-testid="input-title" title="test" />
591
+ *
592
+ * expect(getByTestId('img-alt')).toHaveAccessibleName('Test alt')
593
+ * expect(getByTestId('img-empty-alt')).not.toHaveAccessibleName()
594
+ * expect(getByTestId('svg-title')).toHaveAccessibleName('Test title')
595
+ * expect(getByTestId('button-img-alt')).toHaveAccessibleName()
596
+ * expect(getByTestId('img-paragraph')).not.toHaveAccessibleName()
597
+ * expect(getByTestId('svg-button')).toHaveAccessibleName()
598
+ * expect(getByTestId('svg-without-title')).not.toHaveAccessibleName()
599
+ * expect(getByTestId('input-title')).toHaveAccessibleName()
600
+ * @see
601
+ * [testing-library/jest-dom#tohaveaccessiblename](https://github.com/testing-library/jest-dom#tohaveaccessiblename)
602
+ */
603
+ toHaveAccessibleName(text?: string | RegExp | E): R;
604
+ /**
605
+ * @description
606
+ * This allows you to check whether the given element is partially checked.
607
+ * It accepts an input of type checkbox and elements with a role of checkbox
608
+ * with a aria-checked="mixed", or input of type checkbox with indeterminate
609
+ * set to true
610
+ *
611
+ * @example
612
+ * <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
613
+ * <input type="checkbox" checked data-testid="input-checkbox-checked" />
614
+ * <input type="checkbox" data-testid="input-checkbox-unchecked" />
615
+ * <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
616
+ * <div
617
+ * role="checkbox"
618
+ * aria-checked="false"
619
+ * data-testid="aria-checkbox-unchecked"
620
+ * />
621
+ * <input type="checkbox" data-testid="input-checkbox-indeterminate" />
622
+ *
623
+ * const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed')
624
+ * const inputCheckboxChecked = getByTestId('input-checkbox-checked')
625
+ * const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')
626
+ * const ariaCheckboxChecked = getByTestId('aria-checkbox-checked')
627
+ * const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')
628
+ * const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate')
629
+ *
630
+ * expect(ariaCheckboxMixed).toBePartiallyChecked()
631
+ * expect(inputCheckboxChecked).not.toBePartiallyChecked()
632
+ * expect(inputCheckboxUnchecked).not.toBePartiallyChecked()
633
+ * expect(ariaCheckboxChecked).not.toBePartiallyChecked()
634
+ * expect(ariaCheckboxUnchecked).not.toBePartiallyChecked()
635
+ *
636
+ * inputCheckboxIndeterminate.indeterminate = true
637
+ * expect(inputCheckboxIndeterminate).toBePartiallyChecked()
638
+ * @see
639
+ * [testing-library/jest-dom#tobepartiallychecked](https://github.com/testing-library/jest-dom#tobepartiallychecked)
640
+ */
641
+ toBePartiallyChecked(): R;
642
+ /**
643
+ * @description
644
+ *
645
+ * Check whether the given element has an [ARIA error message](https://www.w3.org/TR/wai-aria/#aria-errormessage) or not.
646
+ *
647
+ * Use the `aria-errormessage` attribute to reference another element that contains
648
+ * custom error message text. Multiple ids is **NOT** allowed. Authors MUST use
649
+ * `aria-invalid` in conjunction with `aria-errormessage`. Learn more from the
650
+ * [`aria-errormessage` spec](https://www.w3.org/TR/wai-aria/#aria-errormessage).
651
+ *
652
+ * Whitespace is normalized.
653
+ *
654
+ * When a `string` argument is passed through, it will perform a whole
655
+ * case-sensitive match to the error message text.
656
+ *
657
+ * To perform a case-insensitive match, you can use a `RegExp` with the `/i`
658
+ * modifier.
659
+ *
660
+ * To perform a partial match, you can pass a `RegExp` or use
661
+ * expect.stringContaining("partial string")`.
662
+ *
663
+ * @example
664
+ * <label for="startTime"> Please enter a start time for the meeting: </label>
665
+ * <input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" />
666
+ * <span id="msgID" aria-live="assertive" style="visibility:visible">
667
+ * Invalid time: the time must be between 9:00 AM and 5:00 PM"
668
+ * </span>
669
+ *
670
+ *
671
+ * const timeInput = getByLabel('startTime')
672
+ *
673
+ * expect(timeInput).toHaveErrorMessage(
674
+ * 'Invalid time: the time must be between 9:00 AM and 5:00 PM',
675
+ * )
676
+ * expect(timeInput).toHaveErrorMessage(/invalid time/i) // to partially match
677
+ * expect(timeInput).toHaveErrorMessage(expect.stringContaining('Invalid time')) // to partially match
678
+ * expect(timeInput).not.toHaveErrorMessage('Pikachu!')
679
+ * @see
680
+ * [testing-library/jest-dom#tohaveerrormessage](https://github.com/testing-library/jest-dom#tohaveerrormessage)
681
+ */
682
+ toHaveErrorMessage(text?: string | RegExp | E): R;
10
683
  }
11
-
12
- declare function toBeChecked(element: Element): MatcherResult;
13
-
14
- declare function toBeEnabled(element: Element): MatcherResult;
15
- declare function toBeDisabled(element: Element): MatcherResult;
16
-
17
- /** @deprecated */
18
- declare function toBeEmpty(element: Element): MatcherResult;
19
-
20
- declare function toBeEmptyDOMElement(element: Element): MatcherResult;
21
-
22
- declare function toBeInTheDocument(element: Element): MatcherResult;
23
-
24
- /** @deprecated */
25
- declare function toBeInTheDOM(element: Element, container?: HTMLElement | SVGElement): MatcherResult;
26
-
27
- declare function toBeInvalid(element: Element): MatcherResult;
28
- declare function toBeValid(element: Element): MatcherResult;
29
-
30
- declare function toBePartiallyChecked(): MatcherResult;
31
-
32
- declare function toBeRequired(element: Element): MatcherResult;
33
-
34
- declare function toBeVisible(element: Element): MatcherResult;
35
-
36
- declare function toContainElement(element: Element, element: HTMLElement | SVGElement | null): MatcherResult;
37
-
38
- declare function toContainHTML(element: Element, htmlText: string): MatcherResult;
39
-
40
- /** @deprecated */
41
- declare function toHaveAccessibleDescription(
42
- text?: string | RegExp | typeof expect.stringContaining,
43
- ): MatcherResult;
44
-
45
- declare function toHaveAccessibleName(text?: string | RegExp | typeof expect.stringContaining): MatcherResult;
46
-
47
- declare function toHaveAttribute(element: Element, attr: string, value?: unknown): MatcherResult;
48
-
49
- declare function toHaveClass(element: Element, ...classNames: string[]): MatcherResult;
50
-
51
- /** @deprecated */
52
- declare function toHaveDescription(
53
- element: Element,
54
- text?: string | RegExp | typeof expect.stringContaining,
55
- ): MatcherResult;
56
-
57
- declare function toHaveDisplayValue(
58
- element: Element,
59
- value: string | RegExp | Array<string | RegExp>,
60
- ): MatcherResult;
61
-
62
- declare function toHaveErrorMessage(
63
- element: Element,
64
- text?: string | RegExp | typeof expect.stringContaining,
65
- ): MatcherResult;
66
-
67
- declare function toHaveFocus(element: Element): MatcherResult;
68
-
69
- declare function toHaveFormValues(
70
- formElement: Element,
71
- expectedValues: Record<string, unknown>,
72
- ): MatcherResult;
73
-
74
- declare function toHaveStyle(element: Element, css: string | Record<string, unknown>): MatcherResult;
75
-
76
- declare function toHaveTextContent(
77
- element: Element,
78
- text: string | RegExp,
79
- options?: { normalizeWhitespace: boolean },
80
- ): MatcherResult;
81
-
82
- declare function toHaveValue(formElement: Element, value?: string | string[] | number | null): MatcherResult;
83
-
84
- export { toBeChecked, toBeDisabled, toBeEmpty, toBeEmptyDOMElement, toBeEnabled, toBeInTheDOM, toBeInTheDocument, toBeInvalid, toBePartiallyChecked, toBeRequired, toBeValid, toBeVisible, toContainElement, toContainHTML, toHaveAccessibleDescription, toHaveAccessibleName, toHaveAttribute, toHaveClass, toHaveDescription, toHaveDisplayValue, toHaveErrorMessage, toHaveFocus, toHaveFormValues, toHaveStyle, toHaveTextContent, toHaveValue };