Angular karma / jasmine unit tests

[caseybelcher543Participant]

I am able to ng serve the app fine, but my .spec unit test for a component throws this error in karma:

Failed: Unexpected value ‘undefined’ declared by the module ‘DynamicTestModule’

Within my spec file:

describe('JobQueueComponent', () => {
  let component: JobQueueComponent;
  let fixture: ComponentFixture<JobQueueComponent>;
  let store: Store<AppState>;
  let researchService: ResearchIndexerService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        jqxGridComponent,        
        JobQueueComponent
      ],
      imports: [
        BrowserModule, 
        FormsModule, 
        HttpClientModule, 
        SuiModule, 
        StoreModule.forRoot(reducers, {})
      ],
      providers: [
        ResearchIndexerService
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(JobQueueComponent);
    component = fixture.componentInstance;
    researchService = TestBed.get(ResearchIndexerService);

    store = TestBed.get(Store);
    spyOn(store, 'dispatch').and.callThrough();
  });

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

I think this has something to do with my karma configuration file: karma.conf.js :

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    include: ['src/**/*'],
    files: [
      "../src/app/app.module.ts",      
      '../node_modules/myfilepath/jqwidgets-ts/angular_jqxgrid.ts'
    ],
    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
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

fixture = TestBed.createComponent(JobQueueComponent) results in fixture being undefined, leading to the karma error.
Any help or examples of .spec files that work would be appreciated.

[caseybelcher543Participant]

I should also note that using a mock grid within the declarations array works – so I do believe this is something jqx related.

[caseybelcher543Participant]

Also, when first running “ng test” I get the “missing from Typescript compilation” error that others have complained about. When ng serving this is fixed by all the tsconfig changes mentioned here:

https://www.jqwidgets.com/angular-components-documentation/documentation/create-jqwidgets-angular-app/index.htm?search=test

When I edit and re-save app.module.ts, the tests try to build themselves again – but this time I get

Uncaught ReferenceError: Zone is not defined at http://localhost:9876/

It is only after I edit and re-save app.module.ts again (and sometimes multiple times after that – with same “Zone is not defined” problem) that the tests will run – but with the problem in original post.

[caseybelcher543Participant]

I will make this simpler: I have made a new angular project which does nothing other than load a single jqxGrid:

app.component.spec.ts :

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

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

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

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

  it('app dummy test', () => {
    expect(1).toBe(2);
  });
});

app.component.ts :

import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {}
}

app.modules.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@NgModule({
  declarations: [AppComponent, jqxGridComponent],
  imports: [BrowserModule],
  providers: [], 
  bootstrap: [AppComponent] 
})
export class AppModule {}    

Same behavior as before.

[Ivo ZhulevParticipant]

Hi caseybelcher543,

For start, this test is done on a fresh install of create-jqwidgets-angular-app.
Modifications:

1. In tsconfig.spec in the include property you must add "../node_modules/jqwidgets-scripts/jqwidgets-ts".
Should look like that:

....
"include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "../node_modules/jqwidgets-scripts/jqwidgets-ts"
  ]
....

2. Write a test(app.component.spec.ts file):

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent, jqxGridComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
  })

  it('should columngroups text be Product Details', () => {
    expect(fixture.componentInstance.columngroups[0].text).toBe('Product Details');
  });
});

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts