React组件Jest/Enzyme测试时如何Mock需鉴权HTTP请求验证isSending渲染逻辑

实现原理 #

通过Jest的模块拦截能力，在测试环境加载被测组件之前，将组件依赖的真实HTTP模块替换为内置的模拟函数，从根源上切断真实网络请求的发起路径，完全规避鉴权校验带来的测试报错。

具体操作步骤 #

• 定位被测组件内HTTP模块的导入路径
  确认业务组件里http.post的来源，是直接引入第三方请求库、还是项目封装的统一请求模块，记下准确的导入相对路径，确保后续mock的路径和组件里的导入路径完全匹配。
• 在测试文件顶层编写模块mock逻辑
  这部分代码必须写在所有被测组件、相关依赖的导入语句之前，否则会导致mock失效。示例代码：

  // ResendButton.test.jsx 最顶部
  jest.mock('<与组件中导入http模块完全一致的路径>', () => ({
    // 结构和组件中实际使用的导出格式保持一致
    http: {
      post: jest.fn() // 替换真实post方法为Jest模拟函数
    }
  }))
  

• 在测试初始化环节配置模拟接口的返回值
  避免模拟的请求出现未处理的Promise悬挂问题，每个用例执行前重置mock状态、配置接口返回结果：

  // 导入mock后的http对象
  import { http } from '<与组件中一致的http模块路径>'
  // 引入被测组件
  import ResendButton from './ResendButton'
  
  beforeEach(() => {
    // 重置所有mock的调用记录、历史返回值配置
    jest.clearAllMocks()
    // 模拟接口返回成功状态，触发组件内的后续逻辑
    http.post.mockResolvedValue({ code: 200, data: {} })
  })
  

• 编写交互逻辑的断言用例
  此时点击Resend按钮不会发起真实网络请求，可正常验证状态与渲染逻辑：
  1. 初始渲染组件，断言页面渲染可交互的Resend按钮、无CircularProgress加载组件
  2. 模拟点击Resend按钮
  3. 断言http.post方法被以正确的接口地址、参数调用一次
  4. 断言组件渲染切换为CircularProgress加载组件，验证isSending状态被正确置为true

常见踩坑提示 #

• 不管你的http.post来自第三方请求库（如axios、fetch封装库）还是项目自定义的统一请求模块，只要mock的导入路径和组件内的引用路径完全匹配，就能正常拦截
• 若后续组件逻辑中会根据接口返回结果重置isSending为false，因为已经配置了mock的Promise返回值，这部分状态变更逻辑会正常执行，不会出现渲染卡死的情况
• 不要将mock逻辑写在单个测试用例内部，否则会打乱Jest的模块加载顺序，导致mock无法拦截真实的HTTP模块
• 不需要手动修改组件内部的isSending状态值，通过真实的按钮点击交互触发的状态变更，才是对组件逻辑的有效验证

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