Angular应用中使用UIKit触发Jest测试报错：ReferenceError: CSS is not defined

版本信息 #

• Angular ~16.2.0
• Jest ^29.4.1
• UIKit ^3.17.8
• Node 20.10.0
• NPM 10.2.5

问题描述 #

运行测试套件时，因Node环境无法访问浏览器CSS API（如getComputedStyle），调用UIkit.default.modal('#welcome-modal').show()时出现报错：

解决方案 #

1. 模拟缺失的浏览器CSS API #

在Jest的全局设置文件（如setup-jest.ts）或单个测试文件顶部添加以下代码，模拟getComputedStyle方法：

// 模拟浏览器的getComputedStyle API
Object.defineProperty(window, 'getComputedStyle', {
  value: () => ({
    getPropertyValue: () => '', // 返回空字符串或UIkit需要的默认值
  }),
});

如果使用全局设置文件，需要在jest.config.js中配置setupFilesAfterEnv指向该文件：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  // 其他配置项
};

2. 直接模拟UIkit模块 #

跳过加载真实UIkit，在组件测试文件中mock整个模块，避免执行依赖浏览器环境的代码：

// 在组件测试文件顶部添加
jest.mock('uikit', () => ({
  default: {
    modal: jest.fn().mockReturnValue({
      show: jest.fn() // 模拟show方法，方便后续断言调用
    })
  }
}));

这样测试时调用UIkit的modal方法只会执行mock函数，不会触发真实的浏览器API依赖逻辑。

3. 确保Jest使用jsdom环境 #

检查jest.config.js中是否配置了testEnvironment: 'jsdom'，Angular组件测试需要DOM环境支持：

module.exports = {
  testEnvironment: 'jsdom',
  // 其他配置项如preset: 'jest-preset-angular'等
};

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