Skip to content

docs: Update Cypress Testing Library scoping example #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 3, 2020
Merged

docs: Update Cypress Testing Library scoping example #373

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cef96f
docs: Update Cypress Testing Library scoping example
NicholasBoll Feb 3, 2020
f69a8d5
docs: update note about other query types
NicholasBoll Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions docs/cypress-testing-library/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ and `queryAllBy` commands off the global `cy` object.
[See the `DOM Testing Library` docs for reference](https://testing-library.com/docs/dom-testing-library/api-queries).

> Note: the `get*` queries are not supported because for reasonable Cypress tests you
> 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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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')

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed with @alexkrolick here 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think find was changed in testing-library/cypress-testing-library#78 and released as 5.0.0

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does the following sound?

https://github.com/testing-library/testing-library-docs/pull/373/files#diff-6245e2573aa625d927375e2065f25b1cR29-R32

Note: the get* queries are not supported because for reasonable Cypress tests you
need retryability and find* 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 for query*).

> necessary, but supported.

## With TypeScript

Expand All @@ -53,9 +52,12 @@ To show some simple examples (from

```javascript
cy.findAllByText('Jackie Chan').click()
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
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')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

find* should be preferred over query*

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. I'm glad that we're keeping all of the query* stuff off here considering we're going to be removing it. Thanks!


// findAllByText _inside_ a form element
cy.get('form').findByText('Button Text').should('exist')
cy.get('form').within(() => {
cy.findByText('Button Text').should('exist')
})
Expand Down