使用 Karma 进行 Angular 单元测试 - 被测组件未在浏览器中呈现

Question

我目前正在尝试使用最新版本的 Angular 为 Angular 项目编写单元测试。我遇到了组件未在测试浏览器（Chrome）中渲染的问题。经过几个小时的搜索并尝试搞乱配置后，我决定退后一步，将当前项目与遗留项目进行比较。我在同一台机器上测试了这两个项目，旧版本可以按预期工作。降级依赖项（Karma、Jasmine）不是一个选项，因为最新的 Angular 版本显然需要更高的版本（我没有找到任何相关文档）。

作为最后一个选择，我决定生成一个干净的项目（Angular CLI 12.2.6）并将其与在线教程进行比较（用于比较的示例教程）。问题依然存在。除了报告的测试结果之外，浏览器中不会呈现任何输出。

更令人困惑的是，调试期间输出是可见的：

问题

如何实现当前被测组件在测试浏览器中呈现？

我想我在这里遗漏了一些明显的东西。如果这可能与问题有关，那么单击测试浏览器中的调试按钮也会显示“%X_UA_COMPATIBLE%”。快速在线搜索没有得到任何有用的结果。

对此问题的任何帮助表示赞赏。

如果需要，添加下面的测试代码：

依赖项（默认 CLI v12.2.6）

"dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.6",
    "@angular/cli": "~12.2.6",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }

Karma 配置（除了自定义启动器之外的默认设置）：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/unit-testing'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeDebug'],
    customLaunchers: {
      ChromeDebug: {
        base: "Chrome",
        flags: [
          "--remote-debugging-port=9333",
        ],
        debug: true,
      },
    },
    singleRun: false,
    restartOnFileChange: true
  });
};

模板

<p>pizza works!</p>

<p>{{toShowInTest}}</p>

成分

@Component({
  selector: 'app-pizza',
  templateUrl: './pizza.component.html',
  styleUrls: ['./pizza.component.css']
})
export class PizzaComponent implements OnInit {

  toShowInTest = "Pizza <3"

  constructor() { }

  ngOnInit(): void {
  }

}

测试

describe('PizzaComponent', () => {
  let component: PizzaComponent;
  let fixture: ComponentFixture<PizzaComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PizzaComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PizzaComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should love pizza', () => {
    expect(component.toShowInTest).toBe('Pizza <3');

    component.toShowInTest = 'I love Pizza!';
    fixture.detectChanges();

    const container = fixture.debugElement.queryAll(By.css('p'))[1];
    expect(container.nativeElement.textContent).toBe('I love Pizza!');
  });
});

Answer 1

我想应该由装饰者toShowInTest标记@Input()

 @Input() toShowInTest = "Pizza <3";