unit-testing - 在 Angular 6 中运行 ng 测试时出现 null 'appendchild' 错误

Question

我有一个 Angular 6 项目，其 TypeScript 2.8.0 和 Node 版本 11。 我有一个功能开发应用程序，并尝试使用 jasmine karma 设置单元测试环境，由于对这些框架的了解有限，我无法调试以下错误。

ERROR: TypeError: Cannot read property 'appendChild' of null
TypeError: Cannot read property 'appendChild' of null
    at HtmlReporter.specDone (http://localhost:9876/base/node_modules/karma-jasmine-html-reporter/src/lib/html.jasmine.reporter.js?a380599bba71e79ed6dc82aa9a857815d894cfda:150:15)
    at dispatch (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4560:28)
    at ReportDispatcher.specDone (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4531:11)
    at Spec.specResultCallback [as resultCallback] (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:1249:18)
    at complete (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:567:12)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:421:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:188:1)
    at drainMicroTaskQueue (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:595:1)

我已经评论了所有规范文件中的每个规范，但仍然出现以下错误。但我唯一担心的是，该错误是由于 karma.conf.ts 中的某些不正确配置造成的

以下是我的karme.config.ts文件，请建议我修正环境准备。

//Karma 配置文件，请参阅链接以获取更多信息 //https://karma-runner.github.io/1.0/config/configuration-file.html

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-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

编辑: 以下是我的规范文件之一，它只有一个带有注释的规范。因此没有正在运行的规范方法。

从“@angular/core/testing”导入{async、ComponentFixture、TestBed}；

从'./passback.component'导入{PassbackComponent}；

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

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

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

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

StackOverflow 中有很多类似的问题，但没有一个能解决，因为其他问题的规范不正确，但我的问题可能是其他原因

提前非常感谢您。

Answer 1

设置

• Angular 7.*(CLI)
• karma 4.*

修复

• 从记者中删除“kjhtml”
  

karma.config.js

...
reporters: ['progress', 'kjhtml']
...