如何mock模块仅用于调用函数 替换ReactDom.render真实实现

你需要的「执行someFunction、或运行其内部所有调用ReactDom.render的逻辑时，用自定义函数替代ReactDom.render真实实现」的效果完全可以实现，但你当前编写的测试辅助函数写法存在问题，无法按预期生效。

• jest.mock 调用位置错误：Jest 会自动将所有jest.mock调用提升到文件最顶层执行，写在函数内部的jest.mock既无法在模块导入前完成依赖替换，还会因作用域限制导致mock失效，甚至触发执行错误。
• mock 恢复逻辑不可靠：调用someFunction后立刻执行jest.unmock，如果someFunction内部存在异步调用ReactDom.render的逻辑（比如Promise回调、定时器触发的渲染），会出现mock提前失效、拦截不到异步渲染调用的问题。
• 存在测试污染风险：这种非顶层的模块mock写法不会自动做依赖隔离，很容易影响同文件内其他测试用例对react-dom的正常调用。

不要在函数内部使用jest.mock做模块替换，直接通过属性劫持的方式临时替换ReactDOM.render方法，执行完目标逻辑后恢复原始实现即可，兼容性和稳定性更好。

通用辅助函数写法 #

import ReactDOM from 'react-dom';

export const testHelperFunction = (widget, anotherArg, customRenderImpl = console.log) => {
  // 暂存原始render方法
  const originalRender = ReactDOM.render;
  // 替换为自定义实现
  ReactDOM.render = customRenderImpl;

  try {
    const execResult = widget.someFunction(anotherArg);
    // 适配异步场景：如果返回Promise，等异步逻辑执行完再恢复原始方法
    if (execResult && typeof execResult.then === 'function') {
      return execResult.finally(() => {
        ReactDOM.render = originalRender;
      });
    }
    return execResult;
  } finally {
    // 同步场景/异常场景下保证原始方法一定被恢复
    if (!execResult?.then) {
      ReactDOM.render = originalRender;
    }
  }
};

Jest测试用例场景推荐写法 #

如果是在单元测试用例中使用，更推荐用Jest内置的spyOn方法实现，自动处理mock状态，手动恢复逻辑更简单：

import ReactDOM from 'react-dom';

test('验证someFunction的渲染逻辑', () => {
  // 劫持render方法，替换为自定义实现
  const mockRender = jest.spyOn(ReactDOM, 'render').mockImplementation(console.log);
  
  widget.someFunction(anotherArg);
  // 可按需添加断言，比如校验render调用次数、传入参数
  expect(mockRender).toHaveBeenCalledTimes(1);

  // 恢复原始实现，避免影响其他用例
  mockRender.mockRestore();
});

• 所有jest.mock调用必须写在文件顶层，不要放在函数、测试用例内部，否则不会按预期生效。
• 如果目标逻辑存在异步调用render的场景，一定要等待所有异步逻辑执行完成后再恢复原始方法，否则会出现拦截遗漏。
• 如果项目使用React 18及以上版本，官方已经废弃ReactDOM.render API，改用react-dom/client的createRoot方法完成渲染，此时需要替换mock的目标为createRoot方法。

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