In Testing Recipes, I want to change to use root.unmount() and createRoot.

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.

從 https://reactjs.org/docs/testing-recipes.html 上的「Testing Recipes」頁面開始，將其中的 cleanup 和 rendering 範例與 issue 中連結的「React 18 upgrade guide」進行比較。檢視建議的 createRoot、root.unmount() 和 act() 用法，然後更新 recipes，使其反映 React 18 testing API，且不再顯示過時的模式。