升级CKEditor5后Jest解析样式表报错问题求助

核心问题分析 #

升级CKEditor5至最新版后，Jest运行测试时出现Could not parse CSS stylesheet错误，甚至影响非编辑器相关测试，大概率是CKEditor5新增的CSS语法（如CSS变量、嵌套规则）超出当前Jest/jsdom的处理能力，或现有模块映射配置未覆盖CKEditor内部的CSS文件。

解决方案 #

1. 针对性Mock CKEditor的CSS文件 #

修改Jest配置里的moduleNameMapper，优先匹配CKEditor的主题CSS，用空模块替代解析：

module.exports = {
  // ...原有配置
  moduleNameMapper: {
    '@/(.*)': '<rootDir>/src/$1',
    '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src',
    // 优先处理CKEditor的CSS文件
    '@ckeditor/ckeditor5-(.*)/theme/(.*)\\.css$': '<rootDir>/__mocks__/styleMock.js',
    '\.(css|less|scss)$': 'identity-obj-proxy',
  },
}

在项目根目录创建__mocks__/styleMock.js，内容为：

module.exports = {};

2. 升级jsdom及相关依赖 #

旧版jsdom可能不支持CKEditor5最新CSS特性，升级依赖确保兼容性：

# 升级jsdom和jest环境依赖
npm install jsdom@latest jest-environment-jsdom@latest --save-dev

3. 自定义CSS转换规则 #

添加专门的CSS转换脚本，跳过CSS解析过程：
修改Jest配置的transform字段：

module.exports = {
  // ...原有配置
  transform: {
    '.+\.(ts|tsx)$': 'ts-jest',
    '\.(css|less|scss)$': '<rootDir>/jest/cssTransform.js',
  },
}

创建jest/cssTransform.js文件：

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    return 'cssTransform';
  },
};

4. 全局Mock CKEditor组件 #

在jest-setup.ts中添加全局mock，隔离CKEditor的渲染和资源加载：

// jest-setup.ts
// Mock CKEditor React组件
jest.mock('@ckeditor/ckeditor5-react', () => ({
  CKEditor: jest.fn(() => null),
}));

// Mock所有CKEditor主题CSS
jest.mock(/@ckeditor\/ckeditor5-.+\/theme\/.+\.css/, () => {});

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