In Testing Recipes, I want to change to use root.unmount() and createRoot.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
unmountComponentAtNode is used on Testing Recipes.
https://reactjs.org/docs/testing-recipes.html
However, unmountComponentAtNode(container) has been changed to root.unmount() in react 18.
It also shows to use createRoot.
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
So I replaced it in my code as follows
// before
import { unmountComponentAtNode } from "react-dom";
let container = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
// after
import { createRoot } from 'react-dom/client';
let container = null;
let root = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
// cleanup on exiting
act(() => root.unmount());
container.remove();
container = null;
});
root.unmount() is wrapped in act(...) because it gives the following warning:
Warning: An update to Root inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
Is this policy and implementation of mine correct?
If correct I will try to create a pull request.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Testing Recipes page at https://reactjs.org/docs/testing-recipes.html and compare its cleanup and rendering examples with the React 18 upgrade guide linked in the issue. Review the proposed createRoot, root.unmount(), and act() usage, then update the recipes so they reflect the React 18 testing API and no longer show the outdated pattern.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100