如何在Jest中实现多test复用rerender，避免组件卸载报错？

你的问题核心在于React Testing Library（RTL）的默认行为：每个test执行完毕后会自动卸载当前测试中的组件。你在describe块顶部提前调用的render，对应的组件会在第一个test结束后被卸载，后续test调用rerender自然会触发「Cannot update an unmounted root」错误。

你可以采用第一种写法，但需要调整组件的渲染时机，以下是两种可行方案：

方案一：在每个测试前重新渲染（推荐） #

用beforeEach在每个test执行前重新渲染组件，确保每个测试都拥有独立的组件实例，既保证了测试的隔离性，又能正常使用rerender：

describe('Some test', () => {
  let rerender;

  beforeEach(() => {
    const { rerender: r } = render(<Component prop1={0} />);
    rerender = r;
  });

  test('Title 1', () => {
    // logic1
  });

  test('Title 2', () => {
    rerender(<Component prop1={0} />);
    // logic2
  });

  test('Title 3', () => {
    rerender(<Component prop1={1} />);
    // logic3
  });

  test('Title 4', () => {
    rerender(null);
    // logic4
  });
});

这种方式完全符合RTL的设计理念，每个测试互相独立，不会出现状态污染的问题，是最稳妥的选择。

方案二：关闭自动卸载，手动控制组件生命周期（不推荐，仅特殊场景使用） #

如果你的测试确实需要在多个test间共享组件状态，可以关闭RTL的自动卸载机制，在所有测试结束后手动卸载组件：

describe('Some test', () => {
  let rerender;
  let unmount;

  beforeAll(() => {
    const renderResult = render(<Component prop1={0} />);
    rerender = renderResult.rerender;
    unmount = renderResult.unmount;

    // 覆盖RTL的自动卸载逻辑
    renderResult.container._internalRoot.unmount = () => {};
  });

  afterAll(() => {
    // 所有测试结束后手动卸载组件
    unmount();
  });

  test('Title 1', () => {
    // logic1
  });

  test('Title 2', () => {
    rerender(<Component prop1={0} />);
    // logic2
  });

  test('Title 3', () => {
    rerender(<Component prop1={1} />);
    // logic3
  });

  test('Title 4', () => {
    rerender(null);
    // logic4
  });
});

⚠️ 注意：这种方式会破坏测试的独立性，前一个测试的状态可能影响后续测试，只有当你明确需要测试跨场景的状态延续时才建议使用。

内容的提问来源于stack exchange，提问作者Yoskutik