@@ -86,21 +86,22 @@ should be installed as one of your project's `devDependencies`:
86
86
npm install --save-dev @testing-library/jest-dom
87
87
```
88
88
89
- > Note: We also recommend installing the jest-dom eslint plugin which provides auto-fixable lint rules
90
- > that prevent false positive tests and improve test readability by ensuring you are using the right
91
- > matchers in your tests. More details can be found at
89
+ > Note: We also recommend installing the jest-dom eslint plugin which provides
90
+ > auto-fixable lint rules that prevent false positive tests and improve test
91
+ > readability by ensuring you are using the right matchers in your tests. More
92
+ > details can be found at
92
93
> [ eslint-plugin-jest-dom] ( https://github.com/testing-library/eslint-plugin-jest-dom ) .
93
94
94
95
## Usage
95
96
96
- Import ` @testing-library/jest-dom/extend-expect ` once (for instance in your
97
- [ tests setup file] [ ] ) and you're good to go:
97
+ Import ` @testing-library/jest-dom ` once (for instance in your [ tests setup
98
+ file] [ ] ) and you're good to go:
98
99
99
100
[ tests setup file] :
100
101
https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array
101
102
102
103
``` javascript
103
- import ' @testing-library/jest-dom/extend-expect '
104
+ import ' @testing-library/jest-dom'
104
105
```
105
106
106
107
> Note: If you're using TypeScript, make sure your setup file is a ` .ts ` and not
@@ -110,7 +111,10 @@ Alternatively, you can selectively import only the matchers you intend to use,
110
111
and extend jest's ` expect ` yourself:
111
112
112
113
``` javascript
113
- import {toBeInTheDocument , toHaveClass } from ' @testing-library/jest-dom'
114
+ import {
115
+ toBeInTheDocument ,
116
+ toHaveClass ,
117
+ } from ' @testing-library/jest-dom/matchers'
114
118
115
119
expect .extend ({toBeInTheDocument, toHaveClass})
116
120
```
@@ -298,10 +302,16 @@ is `false`.
298
302
##### Using document.querySelector
299
303
300
304
` ` ` javascript
301
- expect (document .querySelector (' [data-testid="no-aria-invalid"]' )).not .toBeInvalid ()
305
+ expect (
306
+ document .querySelector (' [data-testid="no-aria-invalid"]' ),
307
+ ).not .toBeInvalid ()
302
308
expect (document .querySelector (' [data-testid="aria-invalid"]' )).toBeInvalid ()
303
- expect (document .querySelector (' [data-testid="aria-invalid-value"]' )).toBeInvalid ()
304
- expect (document .querySelector (' [data-testid="aria-invalid-false"]' )).not .toBeInvalid ()
309
+ expect (
310
+ document .querySelector (' [data-testid="aria-invalid-value"]' ),
311
+ ).toBeInvalid ()
312
+ expect (
313
+ document .querySelector (' [data-testid="aria-invalid-false"]' ),
314
+ ).not .toBeInvalid ()
305
315
306
316
expect (document .querySelector (' [data-testid="valid-form"]' )).not .toBeInvalid ()
307
317
expect (document .querySelector (' [data-testid="invalid-form"]' )).toBeInvalid ()
@@ -427,7 +437,9 @@ must also be `true`.
427
437
` ` ` javascript
428
438
expect (document .querySelector (' [data-testid="no-aria-invalid"]' )).toBeValid ()
429
439
expect (document .querySelector (' [data-testid="aria-invalid"]' )).not .toBeValid ()
430
- expect (document .querySelector (' [data-testid="aria-invalid-value"]' )).not .toBeValid ()
440
+ expect (
441
+ document .querySelector (' [data-testid="aria-invalid-value"]' ),
442
+ ).not .toBeValid ()
431
443
expect (document .querySelector (' [data-testid="aria-invalid-false"]' )).toBeValid ()
432
444
433
445
expect (document .querySelector (' [data-testid="valid-form"]' )).toBeValid ()
@@ -1103,7 +1115,6 @@ expect(document.querySelector('.cancel-button')).toBeTruthy()
1103
1115
> replacing ` toBeInTheDOM` to read through the documentation of the proposed
1104
1116
> alternatives to see which use case works better for your needs.
1105
1117
1106
-
1107
1118
## Inspiration
1108
1119
1109
1120
This whole library was extracted out of Kent C. Dodds' [DOM Testing
0 commit comments