使用Jest模拟Deck.gl的WebMercatorViewport对象报错排查

问题分析 #

你遇到的(intermediate value).fitBounds is not a function错误，说明mock的WebMercatorViewport实例上没有正确挂载fitBounds方法。结合deck.gl v9的版本特性，问题大概率出在mock结构不符合类的实例方法挂载逻辑，或是mock返回值未匹配业务代码的解构需求。

解决方案 #

方案1：修正mock的实例结构（确保fitBounds存在并返回预期值） #

调整setupTests.js中的mock代码，让构造函数返回的实例不仅包含fitBounds方法，还能返回业务代码需要的latitude和longitude结构：

jest.mock("@deck.gl/core", () => ({
  __esModule: true,
  WebMercatorViewport: jest.fn(() => ({
    fitBounds: jest.fn(() => ({
      latitude: 39.9, // 可根据测试场景自定义返回值
      longitude: 116.4
    }))
  })),
  default: jest.fn() // 替换原PropsViewer，避免额外依赖干扰
}))

方案2：模拟类的原型方法（更贴近真实类结构） #

如果业务代码依赖WebMercatorViewport的类原型特性，可以通过模拟原型上的方法实现：

jest.mock("@deck.gl/core", () => {
  const MockWebMercatorViewport = jest.fn();
  // 在原型上挂载fitBounds方法
  MockWebMercatorViewport.prototype.fitBounds = jest.fn(() => ({
    latitude: 39.9,
    longitude: 116.4
  }));

  return {
    __esModule: true,
    WebMercatorViewport: MockWebMercatorViewport,
    default: jest.fn()
  };
});

方案3：在测试用例中手动控制返回值 #

如果需要在不同测试用例中返回不同的经纬度，可以在测试文件中自定义mock返回值：

import { WebMercatorViewport } from "@deck.gl/core";

test('测试视图适配逻辑', () => {
  // 获取mock生成的实例
  const viewportInstance = WebMercatorViewport.mock.results[0].value;
  // 自定义fitBounds的返回结果
  viewportInstance.fitBounds.mockReturnValue({
    latitude: 31.2,
    longitude: 121.5
  });

  // 执行你的测试逻辑...
});

验证要点 #

• 确认setupTests.js被Jest正确加载（检查jest.config.js中的setupFilesAfterEnv配置）
• 排查是否有其他mock覆盖了@deck.gl/core的导出
• 检查业务代码中是否存在未被mock的WebMercatorViewport使用场景

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