Angular项目从Karma切换到Jest后如何测试元素的CSS样式

问题根因 #

Jest 默认使用 jsdom 模拟浏览器环境，默认不会自动加载、解析全局样式与组件关联的样式文件，而 Karma 是运行在真实浏览器环境中，样式资源会被完整加载，所以你在 Karma 中能正常拿到计算样式，切换 Jest 后拿到空值。

可行解决方案 #

方案1：配置Jest加载样式资源（适合需要精准校验样式值的场景） #

1. 先安装样式处理依赖：

npm install identity-obj-proxy jest-transform-stub --save-dev

2. 修改项目根目录的jest.config.js配置，添加样式文件的处理规则，同时引入全局样式：

module.exports = {
  // 其他原有配置保留
  moduleNameMapper: {
    // 处理css、scss等样式文件
    '\\.(css|scss|less)$': 'identity-obj-proxy',
    // 处理静态资源
    '\\.(png|jpg|svg)$': 'jest-transform-stub'
  },
  setupFilesAfterEnv: [
    '<rootDir>/src/setup-jest.ts'
  ]
}

3. 在src/setup-jest.ts中引入你项目的全局样式，比如PrimeNG的主题样式、全局公共样式：

import 'primeng/resources/themes/lara-light-blue/theme.css';
import 'primeng/resources/primeng.min.css';
import './assets/styles/global.scss';

方案2：调整测试逻辑（更推荐，测试性能更高、更稳定） #

样式值通常是由绑定的类名控制的，不需要直接校验计算样式，只需要校验元素是否绑定了对应的类即可，完全规避样式加载的问题：

it('required checkbox label should be blue', () => {
  fixture.detectChanges();
  const e = fixture.debugElement.query(By.css("p-checkbox[required] > label")).nativeElement;
  // 假设蓝色必填标签对应的类是required-label，替换成你实际的类名即可
  expect(e).toHaveClass('required-label');
});

方案3：异步等待组件渲染稳定 #

如果组件有异步加载逻辑，需要等待变更检测完成后再查询元素：

it('required checkbox label should be blue', async () => {
  fixture.detectChanges();
  await fixture.whenStable(); // 等待组件所有异步任务执行完成
  fixture.detectChanges();
  const e = fixture.debugElement.query(By.css("p-checkbox[required] > label")).nativeElement;
  expect(getComputedStyle(e).color).toEqual('rgb(39, 109, 226)');
});

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