JSDOM测试中instanceof无法识别HTMLElement原型的问题

问题根源 #

JSDOM创建的DOM元素实例，其原型链属于JSDOM内部的window上下文；如果测试代码中引用的HTMLElement/SVGElement构造函数来自非JSDOM的上下文（比如错误挂载的全局类型），就会导致instanceof判断失效——两者本质是不同环境下的构造函数，原型链不连通。

可行解决方案 #

1. 使用JSDOM自身的构造函数做判断

确保测试代码中使用的HTMLElement/SVGElement是JSDOM实例导出的版本：

// 在测试文件或setup.ts中
import { JSDOM } from 'jsdom';
const { window } = new JSDOM();
const { HTMLElement, SVGElement } = window;

// 在recordItemColor函数或测试断言中使用
if (targetEl instanceof HTMLElement) {
  // 逻辑处理
}

如果是全局挂载，setup.ts里要挂载JSDOM window下的构造函数：

// setup.ts
import { JSDOM } from 'jsdom';
const dom = new JSDOM('');
globalThis.window = dom.window;
globalThis.HTMLElement = dom.window.HTMLElement;
globalThis.SVGElement = dom.window.SVGElement;

2. 基于命名空间的类型判断（推荐）

利用HTML和SVG元素的固定命名空间做判断，比instanceof更可靠：

// 判断是否为HTMLElement
function isHTMLElement(el) {
  return el?.nodeType === 1 && el.namespaceURI === 'http://www.w3.org/1999/xhtml';
}

// 判断是否为SVGElement
function isSVGElement(el) {
  return el?.nodeType === 1 && el.namespaceURI === 'http://www.w3.org/2000/svg';
}

// 在recordItemColor中使用
if (isHTMLElement(targetEl)) {
  // 处理HTML元素逻辑
} else if (isSVGElement(targetEl)) {
  // 处理SVG元素逻辑
}

3. 利用Object.prototype.toString做判断

既然你已经确认这个方法能正确识别类型，可以封装成复用函数：

function isHTMLElement(el) {
  const typeStr = Object.prototype.toString.call(el);
  return typeStr.startsWith('[object HTML');
}

function isSVGElement(el) {
  const typeStr = Object.prototype.toString.call(el);
  return typeStr.startsWith('[object SVG');
}

这种方式能匹配所有HTML/SVG元素子类（比如HTMLDivElement、SVGPathElement等）。

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