在jsdom测试环境中使用伪类选择器报错的解决方案咨询

针对你遇到的button:hover、:visible等伪类选择器在jsdom测试环境中报错的问题，核心原因是jsdom内置的nwsapi选择器引擎未注册这些非标准/扩展伪类，且直接全局初始化nwsapi会被jsdom覆盖。以下是可行的解决方法：

方法一：扩展jsdom内置的nwsapi实例 #

在jest的初始化文件（如jest.setup.js）中，获取jsdom创建的nwsapi实例并手动注册所需伪类：

const { JSDOM } = require('jsdom');

// 初始化jsdom并获取其内置的nwsapi实例
const dom = new JSDOM('<!DOCTYPE html>');
const nwsapi = dom.window.document.querySelector.nwsapi;

// 注册:hover伪类（需手动触发元素hover状态才能匹配）
nwsapi.addPseudo(':hover', elem => elem.matches(':hover'));

// 注册:visible伪类（模拟jQuery的可见性判断逻辑）
nwsapi.addPseudo(':visible', elem => {
  const rect = elem.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0 && elem.offsetParent !== null;
});

// 让jQuery使用扩展后的选择器引擎（如果项目用jQuery）
if (typeof window !== 'undefined' && window.jQuery) {
  window.jQuery.find = nwsapi.select;
}

然后在jest.config.js中配置：

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  // 其他配置...
};

方法二：直接覆盖jQuery的伪类实现 #

如果项目依赖jQuery，可以在测试文件顶部直接重写对应的伪类逻辑：

// 重写:visible伪类
jQuery.expr.pseudos.visible = function(elem) {
  const rect = elem.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0 && elem.offsetParent !== null;
};

// 重写:hover伪类（需手动设置元素hover状态）
jQuery.expr.pseudos.hover = function(elem) {
  return elem.classList.contains('hover-mock'); // 测试时给元素加该类模拟hover
};

测试hover场景时，手动给元素添加模拟类：

const button = document.querySelector('button');
button.classList.add('hover-mock');
// 此时$("button:hover")会匹配该元素

方法三：用测试断言替代伪类选择器 #

如果只是验证元素状态，推荐用测试库的断言方法代替直接使用伪类选择器，比如使用@testing-library/jest-dom：

// 验证元素可见
expect(screen.getByTestId('testing-div')).toBeVisible();

// 模拟hover并验证行为
fireEvent.mouseOver(screen.getByRole('button'));
// 断言hover后的状态变化

注意事项 #

• :hover是状态伪类，jsdom不会自动模拟用户交互状态，需通过dispatchEvent或类模拟触发。
• :visible没有统一标准，需根据项目实际使用的逻辑（如jQuery、自定义规则）来实现伪类判断。

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