Unit Testing Angular app with jQWidgets and Karma/Jasmine

Question

If anyone has created jasmine/karma Angular tests that have jQWidgets - even if you haven't encountered this error I would like to see your karma.conf.js and .spec files, as I am having an issue.

I am able to ng serve the app fine - the app being little more than the starter provided by Angular - , 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:

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

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

  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.module.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 {} 

I would appreciate any help and/or examples of working jqWidget tests.

Answer 1

Within tsconfig.spec.json, include the jqwidgets filepath:

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