docs: Update Cypress Testing Library scoping example #373
Conversation
Recently testing-library/cypress-testing-library#108 added a way to take the previous subject of a previous command to scope the query. Also `find*` queries handle `.should('not.exist')` and should be preferred over `query*` which require additional logic for eventual non-existence queries.
| > need retryability and `find*` queries already support that. The reason the `query*` | ||
| > variants are supported is to allow you to assert that elements do _not_ appear on | ||
| > the screen. | ||
| > need retryability and `find*` queries already support that. `query*` queries are not |
There was a problem hiding this comment.
query* queries are no longer needed for asserting that elements do not appear in the DOM. A find* query can do that instead:
// Doesn't exist now
cy.findByText('Non-existing Button Text').should('not.exist')
// Eventually won't exist
cy.findByText('Eventually will not exist').should('not.exist')
There was a problem hiding this comment.
I'd include a note about why they are "not necessary", including version when the find* change was added, and mention plans for future deprecation here.
There was a problem hiding this comment.
Agreed with @alexkrolick here 👍
There was a problem hiding this comment.
I think find was changed in testing-library/cypress-testing-library#78 and released as 5.0.0
There was a problem hiding this comment.
How does the following sound?
Note: the
get*queries are not supported because for reasonable Cypress tests you
need retryability andfind*queries already support that.query*queries are no longer
necessary since v5 and will be removed in v6.find*fully support built-in Cypress
assertions (removes the only use-case forquery*).
| cy.queryByLabelText('Label text', {timeout: 7000}).should('exist') | ||
| cy.findByText('Button Text').should('exist') | ||
| cy.findByText('Non-existing Button Text').should('not.exist') | ||
| cy.findByLabelText('Label text', {timeout: 7000}).should('exist') |
There was a problem hiding this comment.
find* should be preferred over query*
There was a problem hiding this comment.
Agreed. I'm glad that we're keeping all of the query* stuff off here considering we're going to be removing it. Thanks!
| > need retryability and `find*` queries already support that. The reason the `query*` | ||
| > variants are supported is to allow you to assert that elements do _not_ appear on | ||
| > the screen. | ||
| > need retryability and `find*` queries already support that. `query*` queries are not |
There was a problem hiding this comment.
Agreed with @alexkrolick here 👍
| cy.queryByLabelText('Label text', {timeout: 7000}).should('exist') | ||
| cy.findByText('Button Text').should('exist') | ||
| cy.findByText('Non-existing Button Text').should('not.exist') | ||
| cy.findByLabelText('Label text', {timeout: 7000}).should('exist') |
There was a problem hiding this comment.
Agreed. I'm glad that we're keeping all of the query* stuff off here considering we're going to be removing it. Thanks!
|
I'm not sure what the ci check failures are. They seem to be npm issues?
|
NicholasBoll
force-pushed
the
pr/update-cypress-docs
branch
from
fb36ae8 to
f69a8d5
Compare
| cy.get('form').then(subject => { | ||
| cy.findByText('Button Text', {container: subject}).should('exist') | ||
| }) |
There was a problem hiding this comment.
What do people think about removing these lines? It is still supported, but the above example is much cleaner and more natural to other Cypress code.
|
Awesome. Thanks! |
|
@all-contributors please add @NicholasBoll for docs |
|
I've put up a pull request to add @NicholasBoll! 🎉 |
Recently testing-library/cypress-testing-library#108 added a way to take the previous subject of a previous command to scope the query. Also
find*queries handle.should('not.exist')and should be preferred overquery*which require additional logic for eventual non-existence queries.