React Testing Library测试报未挂载组件状态更新警告如何解决？

共有三种可行方案，推荐优先选择第一种从根源消除隐患：

方案1：为组件useEffect添加定时器清理逻辑（最推荐） #

这个方案同时解决测试警告和生产环境可能出现的内存泄漏问题，只需修改组件内的useEffect代码，在卸载时清除未执行的定时器：

useEffect(() => {
  const timerId = setTimeout(() => {
    setPersonSuccessAlert(false);
    setUpdatePersonSuccessAlert(false);
  }, 3000);
  // 组件卸载时执行清理，终止定时器
  return () => clearTimeout(timerId);
}, [peopleData, updatePersonSuccessAlert]);

修改完成后，无论组件何时卸载，都不会触发未挂载组件的状态更新警告。

方案2：Mock Context中的状态更新函数 #

如果不想修改业务组件代码，可以在测试中覆盖Context的默认方法，替换为Mock函数：
你之前Mock失败的原因是没有将自定义的Mock函数传入Context Provider，修改测试代码如下：

test('onClick of person name to route to person record view loading for person record', async () => {
  // 初始化Mock函数
  const mockSetPersonSuccessAlert = jest.fn();
  const mockSetUpdatePersonSuccessAlert = jest.fn();
  const history = createMemoryHistory();
  history.push('/people');
  const providerProps = { personSuccessAlert: true };

  const { getByText } = render(
    <MockedProvider mocks={getPeople} addTypename={false}>
      <PeopleContextProvider {...providerProps}>
        {/* 嵌套一层Context Provider，替换更新方法为Mock函数 */}
        <PeopleContext.Consumer>
          {(originalValue) => (
            <PeopleContext.Provider
              value={{
                ...originalValue,
                setPersonSuccessAlert: mockSetPersonSuccessAlert,
                setUpdatePersonSuccessAlert: mockSetUpdatePersonSuccessAlert
              }}
            >
              <Router history={history}>
                <Switch>
                  <Route exact path="/people" component={People} />
                  <Route path="/people/:id" component={PersonRecord} />
                </Switch>
              </Router>
            </PeopleContext.Provider>
          )}
        </PeopleContext.Consumer>
      </PeopleContextProvider>
    </MockedProvider>
  );

  expect(getByText('Loading')).toBeInTheDocument();
  // 用fake timer跳过真实等待时间，提升测试速度
  jest.advanceTimersByTime(3500);
  // 可选：断言Mock函数是否按预期调用
  expect(mockSetPersonSuccessAlert).toHaveBeenCalledWith(false);
  expect(mockSetUpdatePersonSuccessAlert).toHaveBeenCalledWith(false);
});

注意如果使用fake timer，需要在测试开头添加jest.useFakeTimers()，测试结束后添加jest.useRealTimers()重置。

方案3：调整测试等待逻辑，确保状态更新完成 #

如果不需要Mock函数，也可以让测试完整等待定时器执行完成再结束，你原有代码的等待逻辑是有效的，只需要确保测试不会在等待完成前提前退出即可，也可以搭配fake timer使用避免真实等待3.5秒。

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