2

I have an angular 6 project with typescript 2.8.0 and node version 11. I have a functional dev application and trying to setup a unit testing environment with jasmine karma, due to limited knowledge about these frameworks I am not able to debug the following error.

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)

I have commented every spec in all the spec files, but still the following error resulted. But my mere concern is that the error is due to some incorrect configuration in karma.conf.ts

The following is my karme.config.ts file, please suggest me the correction to the environment ready.

// Karma configuration file, see link for more information // 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
  });
};

Edit: The following is one of my spec files, and it has only one spec which is commented. So there are no spec methods that are running.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { PassbackComponent } from './passback.component';

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();
  // });
});

There are a lot of similar questions in StackOverflow but none of them solves because others are of incorrect specs but mine if of possibly some other reason

Thank you so much in advance.

shitterpunk
  • 141
  • 1
  • 1
  • 8
  • Just in case, can you please post your `.spec` file? – dmcgrandle Dec 07 '18 at 06:55
  • Thanks for the quick reply. I have added one spec file , please have a look @dmcgrandle – shitterpunk Dec 07 '18 at 07:02
  • Thank you. It looks like you are fully creating and rendering the components in the test(s) - that is what the `createComponent()` and `fixture.detectChanges()` will do. Do you happen to use Renderer2 anywhere in any components explicitly? Details [here](https://angular.io/api/core/Renderer2) – dmcgrandle Dec 07 '18 at 08:16
  • I have no knowledge of renderer2 and it is not being used anywhere. I have performed a search in the entire project and there is no renderer2. The create component() and fixture.detectChanges() were generated when the component is created and those are imported from the angular/core. Thanks. Please let me know if any other info is required. – shitterpunk Dec 07 '18 at 08:22
  • I have commented every line of spec file, still the appendChild of null exists – shitterpunk Dec 07 '18 at 08:30
  • What version of Jasmine are you using? Based on the stack trace, it looks like the problem is occurring in the HTML reporter, i.e. the UI page that renders the output for the tests, so your spec files and Karma config should be fine. Perhaps your version of Jasmine is outdated? – codequiet Dec 09 '18 at 08:30
  • Just to be sure I understand - you have commented out every line in every .spec file in your entire project and are still getting the same error when you run `ng test`? – dmcgrandle Dec 10 '18 at 20:28

2 Answers2

2

Setup

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

Fix

  • remove "kjhtml" from reporters

karma.config.js

...
reporters: ['progress', 'kjhtml']
...
EMI_S
  • 21
  • 3
0

I had the same problem and compared it to a working project. I fixed it by rolling back my version of karma. In my package.json I changed

"karma": "^3.1.3",

to

"karma": "~3.0.0",

I believe that there was an update to Karma which had broken something else - if I can find the conversation around it, I'll post it for additional information.

Thelrin
  • 1