使用Karma进行Angular单元测试时被测组件未在测试浏览器中渲染

1. 核心原因说明 #

你的单元测试代码、依赖配置、Karma配置均无逻辑错误，组件实际已经成功渲染，只是被Karma默认的测试报告样式隐藏了。默认karma-jasmine-html-reporter的页面样式会将Angular挂载测试组件的容器设为不可见，或被测试结果面板完全遮挡，调试时能在元素面板看到DOM就是最直接的证明。

2. 让组件可见的配置方法 #

方法一：自定义样式固定显示（推荐长期使用） #

在项目根目录新建karma-custom.css，写入以下内容：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
}
/* 测试结果面板占左侧一半 */
#jasmine-container {
  width: 50%;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}
/* 组件渲染区域占右侧一半 */
[id^="root"] {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  border-left: 1px solid #e5e7eb;
}

之后修改karma.conf.js的配置，在plugins同级新增files字段引入自定义样式：

config.set({
  // 原有配置保留，新增以下字段
  files: [
    { pattern: 'karma-custom.css', watched: true }
  ],
  preprocessors: {
    'karma-custom.css': ['webpack']
  },
  // 原有配置保留
})

重启测试服务后，页面会自动分为左右两栏，左侧显示测试结果，右侧实时显示被测组件的渲染效果。

方法二：临时调试快速插入 #

如果只是临时需要查看单个组件的渲染效果，直接在对应测试用例的fixture.detectChanges()之后加一行代码，将组件DOM手动插入页面可见区域：

fixture.detectChanges();
// 新增以下代码
document.body.appendChild(fixture.nativeElement);

3. %X_UA_COMPATIBLE%提示修复 #

这个是karma-jasmine-html-reporter@1.7.0和Karma 6.3+版本的兼容显示bug，不影响任何功能，要修复的话直接将该依赖降级到1.6.0即可：

npm i karma-jasmine-html-reporter@1.6.0 -D

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