JSDOM无法解析SweetAlert2 CSS样式表的问题及解决方案咨询

我之前也碰到过一模一样的情况——JSDOM对现代CSS特性的支持确实有局限，SweetAlert2的CSS里大概率用到了它不兼容的语法（比如高级选择器、复杂CSS变量用法，或者特定的媒体查询规则），导致不管测试用例成败，这个解析错误都会跳出来干扰视线。

给你几个实用的解决方案，按省心程度排序：

1. Mock掉SweetAlert2的CSS导入（最推荐） #

如果你的测试只关注组件逻辑，不需要验证SweetAlert2的样式表现，直接在测试框架里mock掉CSS文件的导入就行。比如用Jest的话：

在测试文件顶部或者全局的jest.setup.js里添加：

jest.mock('sweetalert2/dist/sweetalert2.css', () => {});

这样测试时根本不会加载这个CSS文件，自然就不会触发解析错误了。

2. 用虚拟控制台拦截特定错误 #

如果你确实需要加载CSS，但不想看到这个错误提示，可以通过JSDOM的虚拟控制台过滤掉这个特定报错。

手动初始化JSDOM时这么写：

const { JSDOM } = require('jsdom');
const virtualConsole = new JSDOM.VirtualConsole();

// 只过滤CSS解析错误，其他错误正常输出
virtualConsole.on('error', (err) => {
  if (!err.message.includes('Could not parse CSS stylesheet')) {
    console.error(err);
  }
});

const dom = new JSDOM('<!DOCTYPE html>', {
  virtualConsole,
  resources: 'usable', // 保持资源可用，仅过滤目标错误
  runScripts: 'dangerously'
});

如果用Jest，也可以在jest.config.js里配置测试环境的虚拟控制台：

module.exports = {
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    virtualConsole: new JSDOM.VirtualConsole().sendTo(console, {
      omitJSDOMErrors: true,
      // 自定义过滤逻辑
      filter: (type, msg) => !msg.includes('Could not parse CSS stylesheet')
    })
  }
};

3. 禁用JSDOM的CSS解析功能 #

作为终极方案，你可以直接关闭JSDOM的CSS解析能力，彻底避免这类问题。在JSDOM配置里添加cssOptions: { parse: false }：

const dom = new JSDOM('<!DOCTYPE html>', {
  cssOptions: { parse: false },
  resources: 'usable',
  runScripts: 'dangerously'
});

不过要注意：如果你的测试依赖CSS样式的渲染结果（比如判断元素是否可见），这个方案可能会影响测试准确性，只适合纯逻辑测试的场景。

另外提一句，如果用的是Vitest，配置逻辑和Jest类似，把配置文件换成vitest.config.js调整对应测试环境选项即可。

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