vue-test-utils搭配jest测试报Request is not defined如何解决

Jest 测试默认基于 jsdom 模拟浏览器运行环境，旧版本 jsdom 未内置 Fetch 规范对应的Request构造函数。真实浏览器原生提供了该API，所以业务代码运行正常，测试环境找不到该对象就会抛出ReferenceError: Request is not defined错误。

• 全局补全Fetch API polyfill
  安装依赖：npm i whatwg-fetch -D
  在Jest配置项的setupFiles或setupFilesAfterEnv字段对应的启动文件中，加入引入语句：

  import 'whatwg-fetch'
  

  所有测试运行前会自动挂载Request、fetch、Response等缺失的浏览器API，和真实浏览器环境保持一致。

• 测试环境手动Mock全局Request
  如果不想引入额外依赖，可以在测试启动文件或单个用例中，直接给全局对象挂载Request的mock实现：

  // 放在测试用例执行前即可
  global.Request = jest.fn((url, init) => ({ url, ...init }))
  // 如果业务逻辑后续用fetch发起请求，可同步mock fetch避免报错
  global.fetch = jest.fn().mockResolvedValue({
    json: () => Promise.resolve({ code: 200, data: {} })
  })
  

  单文件内mock的话，记得在用例执行完成后恢复mock，避免污染其他测试用例。

• 单元测试层面隔离网络请求逻辑
  针对当前登录组件测试场景，单元测试核心校验的是交互逻辑（点击按钮触发提交方法、登录成功后路由跳转），不需要真实执行底层网络请求构造逻辑，可以直接mock掉接口调用相关逻辑：

  // 挂载组件前直接mock executeLogin方法，跳过内部Request构造逻辑
  jest.spyOn(Login.methods, 'executeLogin').mockResolvedValue({ code: 200 })
  

  这种方式符合单元测试的隔离原则，不会被底层API实现影响测试结果，执行速度也更快。

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