Skip to content

Commit

Permalink
fix: remove deprecated query* queries (#130)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Remove `query*` queries. Throw an error instead. Fixing requires updating all `query*` to `find*` queries. In practice this means replacing `cy.query` with `cy.find`

BREAKING CHANGE: Remove fallback that retries chaiined query that assumes no previous subject. In practice this means starting new chains if no previous subject is required.

```js
// Before
cy.findByText('Foo')
  .click()
  .findByText('Bar') // Element with 'Bar' text is not a child of an element with 'Foo' text
  .click()
// After
cy.findByText('Foo')
  .click()
cy.findByText('Bar')
  .click()
```
  • Loading branch information
NicholasBoll authored and kentcdodds committed Mar 12, 2020
1 parent 503cbc0 commit ee75c14
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 329 deletions.
69 changes: 34 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ This allows you to use all the useful
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [With TypeScript](#with-typescript)
- [Usage](#usage)
Expand All @@ -79,7 +78,8 @@ npm install --save-dev @testing-library/cypress

### With TypeScript

Typings are defined in `@types/testing-library__cypress` at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress),
Typings are defined in `@types/testing-library__cypress` at
[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress),
and should be added as follows in `tsconfig.json`:

```json
Expand All @@ -100,11 +100,12 @@ Add this line to your project's `cypress/support/commands.js`:
import '@testing-library/cypress/add-commands'
```

You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy`
and `queryAllBy` commands.
You can now use all of `DOM Testing Library`'s `findBy` and `findAllBy`
commands.
[See the `DOM Testing Library` docs for reference](https://testing-library.com)

You can find [all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts).
You can find
[all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts).

To configure DOM Testing Library, use the following custom command:

Expand All @@ -113,46 +114,43 @@ cy.configureCypressTestingLibrary(config)
```

To show some simple examples (from
[cypress/integration/query.spec.js](cypress/integration/query.spec.js) or [cypress/integration/find.spec.js](cypress/integration/find.spec.js)):
[cypress/integration/find.spec.js](cypress/integration/find.spec.js)):

```javascript
cy.queryAllByText('Button Text').should('exist')
cy.queryAllByText('Non-existing Button Text').should('not.exist')
cy.queryAllByLabelText('Label text', {timeout: 7000}).should('exist')
cy.findAllByText('Jackie Chan').click();
cy.findAllByText('Button Text').should('exist')
cy.findAllByText('Non-existing Button Text').should('not.exist')
cy.findAllByLabelText('Label text', {timeout: 7000}).should('exist')
cy.findAllByText('Jackie Chan').click()

// findAllByText _inside_ a form element
cy.get('form').within(() => {
cy.findAllByText('Button Text').should('exist')
})
cy.get('form').then(subject => {
cy.findAllByText('Button Text', {container: subject}).should('exist')
})
cy.get('form').findAllByText('Button Text').should('exist')
cy.get('form')
.findAllByText('Button Text')
.should('exist')
```

### Differences from DOM Testing Library

`Cypress Testing Library` supports both jQuery elements and DOM nodes. This is
necessary because Cypress uses jQuery elements, while `DOM Testing Library`
expects DOM nodes. When you pass a jQuery element as `container`, it will get
the first DOM node from the collection and use that as the `container` parameter
for the `DOM Testing Library` functions.

`get*` queries are disabled. `find*` queries do not use the Promise API of
`DOM Testing Library`, but instead forward to the `get*` queries and use Cypress'
built-in retryability using error messages from `get*` APIs to forward as error
messages if a query fails. `query*` also uses `get*` APIs, but disables retryability.

`findAll*` can select more than one element and is closer in functionality to how
Cypress built-in commands work. `findAll*` is preferred to `find*` queries.
`find*` commands will fail if more than one element is found that matches the criteria
which is not how built-in Cypress commands work, but is provided for closer compatibility
to other Testing Libraries.

Cypress handles actions when there is only one element found. For example, the following
will work without having to limit to only 1 returned element. The `cy.click` will
automatically fail if more than 1 element is returned by the `findAllByText`:
expects DOM nodes. When you chain a query, it will get the first DOM node from
`subject` of the collection and use that as the `container` parameter for the
`DOM Testing Library` functions.

`get*` and `query*` queries are disabled. `find*` queries do not use the Promise
API of `DOM Testing Library`, but instead forward to the `get*` queries and use
Cypress' built-in retryability using error messages from `get*` APIs to forward
as error messages if a query fails.

`findAll*` can select more than one element and is closer in functionality to
how Cypress built-in commands work. `find*` commands will fail if more than one
element is found that matches the criteria which is not how built-in Cypress
commands work, but is provided for closer compatibility to other Testing
Libraries.

Cypress handles actions when there is only one element found. For example, the
following will work without having to limit to only 1 returned element. The
`cy.click` will automatically fail if more than 1 element is returned by the
`findAllByText`:

```javascript
cy.findAllByText('Some Text').click()
Expand Down Expand Up @@ -237,6 +235,7 @@ Thanks goes to these people ([emoji key][emojis]):

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors] specification.
Expand Down
18 changes: 0 additions & 18 deletions cypress/integration/configure.spec.js

This file was deleted.

22 changes: 1 addition & 21 deletions cypress/integration/find.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ describe('find* dom-testing-library commands', () => {

it('findByText with a previous subject', () => {
cy.get('#nested')
.findByText('Button Text 1', {fallbackRetryWithoutPreviousSubject: false})
.findByText('Button Text 1')
.should('not.exist')
cy.get('#nested')
.findByText('Button Text 2')
Expand Down Expand Up @@ -188,15 +188,6 @@ describe('find* dom-testing-library commands', () => {
cy.findByText(/^Button Text/i, {timeout: 100})
})

it('findByText should not break existing code', () => {
cy.window()
.findByText('Button Text 1')
.should('exist')
cy.location()
.findByText('Button Text 1')
.should('exist')
})

it('findByText should show as a parent command if it starts a chain', () => {
const assertLog = (attrs, log) => {
if (log.get('name') === 'findByText') {
Expand All @@ -218,17 +209,6 @@ describe('find* dom-testing-library commands', () => {
cy.on('log:added', assertLog)
cy.get('body').findByText('Button Text 1')
})

it('should chain findBy* with subject different of document, element or window', () => {
cy.wrap(true)
.should('be.true')
.findByText('Error message')
.findByLabelText(/Required/i)
.type('something')
.findByText('Submit')
.queryByText('Error message')
.should('not.be.visible')
})
})

/* global cy */
Loading

0 comments on commit ee75c14

Please sign in to comment.