Releases: testing-library/dom-testing-library
v7.0.2
v7.0.1
v7.0.0
7.0.0 (2020-03-12)
Features
- waitFor: replace
waitwithwaitFor(read more in the Breaking changes list below) (2b641e1), closes #376 #416 - waitForElementToBeRemoved: support passing an element directly (#460) (1b711a4)
The new feature in waitForElementToBeRemoved is pretty cool. Here's what you had to do before:
const submitButton = screen.getByText(/submit/i)
fireEvent.click(submitButton)
await waitForElementToBeRemoved(() => screen.getByText(/submit/i))
// submit is now goneThat still works, but you can now do this too:
const submitButton = screen.getByText(/submit/i)
fireEvent.click(submitButton)
await waitForElementToBeRemoved(submitButton)
// submit is now goneCool right!?
BREAKING CHANGES
Drop Node 8
Node 10 or greater is required. Node 8 is out of LTS (#459) (c3ab843), closes #430
MutationObserver shim removed.
MutationObserver is supported by all major browsers and recent versions of JSDOM. If you need, you can create your own shim (using @sheerun/mutationobserver-shim) and attach it to the window. If you're on an old version of Jest, either update your version of Jest or use jest-environment-jsdom-sixteen (#457) (e3fdb8e9)
If you're using the latest version of react-scripts (Create React App), here are your options:
Option 1:
Wait until the react-scripts updates to the latest version of Jest (subscribe to this PR)
Option 2 (recommended):
Install jest-environment-jsdom-sixteen and then update your test script:
...
"scripts": {
...
- "test": "react-scripts test --env=dom"
+ "test": "react-scripts test --env=jest-environment-jsdom-sixteen"
...
},
...
"devDependencies": {
...
"jest-environment-jsdom-sixteen": "^1.0.3",
...
},
...Option 3:
Add the MutationObserver constructor to window via @sheerun/mutationobserver-shim:
npm install --save-dev @sheerun/mutationobserver-shim
# yarn add --dev @sheerun/mutationobserver-shim
// src/setupTests.js
import MutationObserver from '@sheerun/mutationobserver-shim'
window.MutationObserver = MutationObserverwaitFor: wait is now deprecated in favor of waitFor
waitFor satisfies the use cases of wait, waitForElement, and waitForDomChange, so those have been deprecated (will be removed in the next major version). Here are some examples of how you can change those:
- await wait()
+ await waitFor(() => {})This should get you going on the upgrade, but it's recommended to avoid an empty callback and instead insert an assertion in that callback function. This is because otherwise your test is relying on the "next tick of the event loop" before proceeding, and that's not consistent with the philosophy of the library:
The more your tests resemble the way your software is used, the more confidence they can give you.
So it would be better to move the assertion that followed await wait() into the callback you provide to await waitFor(() => { /* assertion here */ })
As for waitForElement, that should normally be accomplished with one of the find* queries:
- const element = await waitForElement(() => screen.getByText(/loading/i))
+ const element = await screen.findByText(/loading/i)However, if for some reason you cannot use a find query, then waitFor should be a find/replace for waitForElement:
- const element = await waitForElement(() => container.querySelector('.loading'))
+ const element = await waitFor(() => container.querySelector('.loading'))waitForDomChange encouraged testing implementation details because the user doesn't care about when the DOM changes, they care about when something appears or disappears from the page, so it's better to use waitFor with a specific assertion or waitForElementToBeRemoved (if that's what you're actually trying to do):
- await waitForDomChange()
+ await waitFor(() => {})
// remember, this is not recommended, provide a specific assertion
- await waitForDomChange(mutationObserverOptions)
+ await waitFor(() => {}, mutationObserverOptions)
// if you provided mutationObserverOptions, you can provide those as a second argumentNote that wait called your callback function on an interval and waitFor also does this, but it also calls your callback with the mutation observer as well, which is why it supports the use cases of the deprecated methods so well.
And to be clear, waitForElementToBeRemoved, is not getting deprecated or removed, in fact, it got a really neat new feature which you can read about above.
default timeout for async utilities is now 1000ms rather than 4500ms
Most of the time in the kinds of tests that people are writing with DOM Testing Library, if something doesn't happen within 1 second, then it probably won't happen at all and waiting a full 4.5 seconds is a frustrating amount of time. So that's why the default has been changed, however this can be configured when calling the async utility via the timeout option and it can also be globally configured: https://testing-library.com/docs/dom-testing-library/api-configuration
- ByLabelText: If you used the
selectoroption inByLabelTextqueries, then you will probably need to update that code to be able to find the label you're looking for:
// <label for="example-input" class="example">Example</label><input id="example-input" />
- screen.getByLabelText(/example/i, {selector: '.example'})
+ screen.getByLabelText(/example/i)
+ // or: screen.getByLabelText(/example/i, {selector: '#example-input})Changed the selector option in ByLabelText queries.
If you used the selector option in ByLabelText queries, then you will probably need to update that code to be able to find the label you're looking for as a result of #373.
v7.0.0-beta.4
7.0.0-beta.4 (2020-03-04)
Bug Fixes
Features
- wait: remove default no-op callback (#461) (734ec39)
- waitForElementToBeRemoved: support passing an element directly (#460) (aef3df1)
BREAKING CHANGES
- wait: If you used
wait()in the past, you now have to supply a callback. Relying on the "next tick" is an implementation detail and should be avoided in favor of explicit expecations within your wait callback. - This drops support for Node 8. Node 10 or greater is now required.
v7.0.0-beta.3
7.0.0-beta.3 (2020-03-04)
Features
BREAKING CHANGES
- MutationObserver is supported by all major browsers and recent versions of JSDOM. If you need, you can create your own shim (using @sheerun/mutationobserver-shim) and attach it to the window.
v7.0.0-beta.2
7.0.0-beta.2 (2020-03-04)
Features
BREAKING CHANGES
- wait:
waitForElementis deprecated in favor offind*queries orwait. - wait:
waitForDomChangeis deprecated in favor ofwait - wait: default timeout for async utilities is now 1000ms rather than 4500ms. This can be configured: https://testing-library.com/docs/dom-testing-library/api-configuration
v7.0.0-beta.1
7.0.0-beta.1 (2020-03-04)
Features
BREAKING CHANGES
- ByLabelText: If you used the
selectoroption inByLabelTextqueries, then you will probably need to update that code to be able to find the label you're looking for.