@@ -57,7 +57,6 @@ This allows you to use all the useful
57
57
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
58
58
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
59
59
60
-
61
60
- [ Installation] ( #installation )
62
61
- [ With TypeScript] ( #with-typescript )
63
62
- [ Usage] ( #usage )
@@ -79,7 +78,8 @@ npm install --save-dev @testing-library/cypress
79
78
80
79
### With TypeScript
81
80
82
- Typings are defined in ` @types/testing-library__cypress ` at [ DefinitelyTyped] ( https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress ) ,
81
+ Typings are defined in ` @types/testing-library__cypress ` at
82
+ [ DefinitelyTyped] ( https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress ) ,
83
83
and should be added as follows in ` tsconfig.json ` :
84
84
85
85
``` json
@@ -100,11 +100,12 @@ Add this line to your project's `cypress/support/commands.js`:
100
100
import ' @testing-library/cypress/add-commands'
101
101
```
102
102
103
- You can now use all of ` DOM Testing Library ` 's ` findBy ` , ` findAllBy ` , ` queryBy `
104
- and ` queryAllBy ` commands.
103
+ You can now use all of ` DOM Testing Library ` 's ` findBy ` and ` findAllBy `
104
+ commands.
105
105
[ See the ` DOM Testing Library ` docs for reference] ( https://testing-library.com )
106
106
107
- You can find [ all Library definitions here] ( https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts ) .
107
+ You can find
108
+ [ all Library definitions here] ( https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts ) .
108
109
109
110
To configure DOM Testing Library, use the following custom command:
110
111
@@ -113,46 +114,43 @@ cy.configureCypressTestingLibrary(config)
113
114
```
114
115
115
116
To show some simple examples (from
116
- [ cypress/integration/query.spec.js ] ( cypress/integration/query.spec.js ) or [ cypress/integration/ find.spec.js] ( cypress/integration/find.spec.js ) ):
117
+ [ cypress/integration/find.spec.js] ( cypress/integration/find.spec.js ) ):
117
118
118
119
``` javascript
119
- cy .queryAllByText (' Button Text' ).should (' exist' )
120
- cy .queryAllByText (' Non-existing Button Text' ).should (' not.exist' )
121
- cy .queryAllByLabelText (' Label text' , {timeout: 7000 }).should (' exist' )
122
- cy .findAllByText (' Jackie Chan' ).click ();
120
+ cy .findAllByText (' Button Text' ).should (' exist' )
121
+ cy .findAllByText (' Non-existing Button Text' ).should (' not.exist' )
122
+ cy .findAllByLabelText (' Label text' , {timeout: 7000 }).should (' exist' )
123
+ cy .findAllByText (' Jackie Chan' ).click ()
123
124
124
125
// findAllByText _inside_ a form element
125
- cy .get (' form' ).within (() => {
126
- cy .findAllByText (' Button Text' ).should (' exist' )
127
- })
128
- cy .get (' form' ).then (subject => {
129
- cy .findAllByText (' Button Text' , {container: subject}).should (' exist' )
130
- })
131
- cy .get (' form' ).findAllByText (' Button Text' ).should (' exist' )
126
+ cy .get (' form' )
127
+ .findAllByText (' Button Text' )
128
+ .should (' exist' )
132
129
```
133
130
134
131
### Differences from DOM Testing Library
135
132
136
133
` Cypress Testing Library ` supports both jQuery elements and DOM nodes. This is
137
134
necessary because Cypress uses jQuery elements, while ` DOM Testing Library `
138
- expects DOM nodes. When you pass a jQuery element as ` container ` , it will get
139
- the first DOM node from the collection and use that as the ` container ` parameter
140
- for the ` DOM Testing Library ` functions.
141
-
142
- ` get* ` queries are disabled. ` find* ` queries do not use the Promise API of
143
- ` DOM Testing Library ` , but instead forward to the ` get* ` queries and use Cypress'
144
- built-in retryability using error messages from ` get* ` APIs to forward as error
145
- messages if a query fails. ` query* ` also uses ` get* ` APIs, but disables retryability.
146
-
147
- ` findAll* ` can select more than one element and is closer in functionality to how
148
- Cypress built-in commands work. ` findAll* ` is preferred to ` find* ` queries.
149
- ` find* ` commands will fail if more than one element is found that matches the criteria
150
- which is not how built-in Cypress commands work, but is provided for closer compatibility
151
- to other Testing Libraries.
152
-
153
- Cypress handles actions when there is only one element found. For example, the following
154
- will work without having to limit to only 1 returned element. The ` cy.click ` will
155
- automatically fail if more than 1 element is returned by the ` findAllByText ` :
135
+ expects DOM nodes. When you chain a query, it will get the first DOM node from
136
+ ` subject ` of the collection and use that as the ` container ` parameter for the
137
+ ` DOM Testing Library ` functions.
138
+
139
+ ` get* ` and ` query* ` queries are disabled. ` find* ` queries do not use the Promise
140
+ API of ` DOM Testing Library ` , but instead forward to the ` get* ` queries and use
141
+ Cypress' built-in retryability using error messages from ` get* ` APIs to forward
142
+ as error messages if a query fails.
143
+
144
+ ` findAll* ` can select more than one element and is closer in functionality to
145
+ how Cypress built-in commands work. ` find* ` commands will fail if more than one
146
+ element is found that matches the criteria which is not how built-in Cypress
147
+ commands work, but is provided for closer compatibility to other Testing
148
+ Libraries.
149
+
150
+ Cypress handles actions when there is only one element found. For example, the
151
+ following will work without having to limit to only 1 returned element. The
152
+ ` cy.click ` will automatically fail if more than 1 element is returned by the
153
+ ` findAllByText ` :
156
154
157
155
``` javascript
158
156
cy .findAllByText (' Some Text' ).click ()
@@ -237,6 +235,7 @@ Thanks goes to these people ([emoji key][emojis]):
237
235
238
236
<!-- markdownlint-enable -->
239
237
<!-- prettier-ignore-end -->
238
+
240
239
<!-- ALL-CONTRIBUTORS-LIST:END -->
241
240
242
241
This project follows the [ all-contributors] [ all-contributors ] specification.
0 commit comments