jsdom不支持SVGTextElement.getComputedTextLength导致jest测试报错如何解决

根因 #

你之前的mock方案不生效的核心原因是：默认jsdom环境未实现SVGTextElement构造函数，直接访问其原型挂载方法时，原型对象本身不存在，导致mock逻辑没有真正生效。 #

解决方案 #

方案1：全局兜底定义后再mock（推荐，一次配置全局生效）

在项目的setupTests.ts/setupTests.js中添加如下代码：

const globalAny = global as any;

if (!globalAny.window.SVGTextElement) {
  // 为jsdom环境兜底定义SVGTextElement构造函数
  globalAny.window.SVGTextElement = class extends globalAny.window.SVGElement {};
}

// 挂载mock的getComputedTextLength方法，可自定义返回值
globalAny.window.SVGTextElement.prototype.getComputedTextLength = jest.fn(() => 100);

如果是在单个测试文件的beforeEach中配置mock，需要保证mock逻辑执行在组件渲染逻辑之前。

方案2：业务代码增加兼容判断

如果不想修改测试配置，可以直接在计算宽度的逻辑里增加环境兼容兜底：

const computeTextWidth = () => {
  // 优先调用原生方法
  if (textRef.current?.getComputedTextLength instanceof Function) {
    return textRef.current.getComputedTextLength();
  }
  // 测试环境兜底，可选择返回固定值或者用offsetWidth兜底
  return textRef.current?.offsetWidth || 100;
};

方案3：升级jsdom版本

19及以上版本的jsdom已经完善了大部分SVG相关API的实现，升级到jsdom@19+也可以直接解决这个问题，无需额外mock。

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