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 all commits
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
18 changes: 9 additions & 9 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,9 @@ 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 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*`).

## With TypeScript

Expand All @@ -53,12 +53,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.get('form').within(() => {
cy.findByText('Button Text').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').then(subject => {
cy.findByText('Button Text', {container: subject}).should('exist')
})
Comment on lines 62 to 64
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Expand Down