在Dom测试开始之前对于每个测试，我们通常希望将 React 树渲染给附加到 document的 DOM 元素。这点很重

创建/清理

对于每个测试，我们通常希望将 React 树渲染给附加到 document的 DOM 元素。这点很重要，以便它可以接收 DOM 事件。当测试结束时，我们需要“清理”并从 document 中卸载树。

常见的方法是使用一对 beforeEach 和 afterEach 块，以便它们一直运行，并隔离测试本身造成的影响：

import { unmountComponentAtNode } from "react-dom";

let container = null as HTMLElement | null;
beforeEach(() => {
  // 创建一个 DOM 元素作为渲染目标
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 退出时进行清理
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});
export default container as HTMLElement;

你可以使用不同的测试模式，但请注意，即使测试失败，也需要执行清理。否则，测试可能会导致“泄漏”，并且一个测试可能会影响另一个测试的行为。这使得其难以调试。测试之前增加一个初始化的流程，每个单元测试引用此文件，以免测试时发生量子纠缠，无法预测单个单元测试的个体行为。

如果使用了testing-library/react库，则把unmountComponentAtNode改成 testing-library/react库的cleanup。

使用

let result = render(<MyComponent />, { container });

以result为基础的dom测试就可以case by case写了。