如何在Jest中判断HTML元素类型？遇HTMLLabelElement未定义错误

问题原因 #

Jest默认使用jsdom模拟浏览器环境，但部分HTML元素构造函数（如HTMLLabelElement）并未直接暴露为全局变量，导致直接调用时出现ReferenceError。

可行解决方法 #

方法1：通过tagName判断元素类型 #

这是最直接且兼容性好的方式，无需依赖构造函数：

it('check HTML label Element type', async () => {
  const labelEl = document.createElement('label');
  console.log(labelEl.tagName === 'LABEL'); // 输出 true
});

方法2：从window对象获取构造函数 #

HTML元素构造函数通常挂载在window对象上，可通过window.HTMLLabelElement访问：

it('check HTML label Element type', async () => {
  const labelEl = document.createElement('label');
  console.log(labelEl instanceof window.HTMLLabelElement); // 输出 true
});

方法3：通过Object.prototype.toString判断类型 #

利用原生对象的toString方法识别具体元素类型：

it('check HTML label Element type', async () => {
  const labelEl = document.createElement('label');
  console.log(Object.prototype.toString.call(labelEl) === '[object HTMLLabelElement]'); // 输出 true
});

方法4：升级或配置jsdom（针对旧版本Jest） #

若使用的是较旧版本的Jest（对应jsdom版本偏低），可尝试升级Jest到最新稳定版，或者在Jest配置文件中显式配置jsdom特性，确保HTML元素构造函数被正确暴露。

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