Jest运行测试触发jsdom无法解析CSS样式表错误，不影响用例但污染输出如何处理

问题根因 #

该报错本质是Jest使用的jsdom环境对部分CSS语法（尤其是第三方date-picker通过Emotion运行时注入的带厂商前缀的CSS规则）解析能力不足导致的。你本地的scss已经通过identity-obj-proxy做了代理，不会触发样式注入，所以问题只会出现在第三方组件运行时插入样式的场景。

可尝试的排查&解决方向 #

• 优先采用日志过滤方案快速解决日志污染问题，在你配置的setupFilesAfterEnv对应的./src/helpers/jestHelper.ts文件中加入以下代码：

// 过滤jsdom CSS解析错误日志
const originalConsoleError = console.error;
console.error = (...args) => {
  if (
    typeof args[0] === 'string' &&
    args[0].includes('Error: Could not parse CSS stylesheet')
  ) {
    return;
  }
  originalConsoleError(...args);
};

该方案不会影响测试逻辑，直接屏蔽无关错误输出，落地成本最低。

• 测试环境下禁用Emotion的样式注入和前缀生成：你可以在测试启动时配置Emotion的全局参数，关闭自动前缀、禁用样式插入到DOM，从根源避免jsdom解析CSS的步骤，示例配置同样加在jestHelper.ts中：

import { cache } from '@emotion/css';

// 测试环境下配置emotion不插入样式
cache.sheet.container = null;

如果你的项目没有直接依赖Emotion，可以通过模块代理的方式mock@emotion/sheet的insert方法：在jest.config.js的moduleNameMapper中新增配置：

"@emotion/sheet": "<rootDir>/__mocks__/emotionSheetMock.js"

对应的mock文件内容为：

module.exports = {
  Sheet: class MockSheet {
    insert() {}
  }
};

• 对比第三方组件仓库的Jest配置：你提到在第三方仓库本地测试没有复现问题，可以核对他们的以下配置项：
  1. 有没有自定义jsdom环境，或者对jsdom的virtualConsole做了过滤配置
  2. 有没有mock Emotion相关的依赖
  3. 测试用例渲染组件时有没有包裹额外的Provider处理样式
• 强制锁定jsdom版本：如果你之前只指定了依赖中的jsdom版本没有生效，大概率是Jest依赖的子版本和你指定的版本冲突，可以在package.json中添加强制版本覆盖配置：
  • 如果你用npm：

  "overrides": {
    "jsdom": "^22.1.0"
  }
  

  • 如果你用yarn：

  "resolutions": {
    "jsdom": "^22.1.0"
  }
  

  配置完成后删除lock文件重新安装依赖即可。

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