angularunit-testingcompiler-errorsangular-redux

TypeError: jit__object_Object_38 is not a constructor, NgRedux, Angular 2


Please forgive me just trying on things in Unit testing in Angular 2. This weird error comes on executing npm run test. Might be a small mistake, but unabel to figure out with this weird error:

import { TestBed, async, inject } from '@angular/core/testing';
import { TestModule } from '../../test/test.module';
import { DevExtremeModule } from 'devextreme-angular';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpModule, XHRBackend, RequestOptions } from '@angular/http';
import { Templates } from './templates.component';
import { CommandButton } from '../../common/tool/command-button.component';
import { NgReduxModule, NgRedux } from '@angular-redux/store/lib';
import { MockBackend } from "@angular/http/testing/mock_backend";
import { HttpService } from "../../services/http.service";
import { AppState } from '../../redux/index';


// Mock out the NgRedux class with just enough to test what we want.
class MockRedux extends NgRedux<AppState> {
  constructor(private state: AppState) {
    super(null);
  }
  dispatch = () => undefined;
  getState = () => this.state;
}


describe('Component : Templates', () => {

  let fixture;
  let mockRedux: NgRedux<AppState>;
  let mockState : AppState = {
    session : { token: '', user: { firstName : 'Test User' }, isError: null }
  };

  beforeEach(done => {
    mockRedux = new MockRedux(mockState);

    const configure = (testBed: TestBed) => {
      testBed.configureTestingModule({
        imports: [ TestModule, DevExtremeModule, 
            RouterTestingModule, HttpModule ],
        declarations : [ Templates ],
        providers: [
          { provide: XHRBackend, useClass: MockBackend },
          {
            provide: HttpService,
            useFactory: (backend: XHRBackend, options: RequestOptions, redux: NgRedux<AppState> ) => {
              return new HttpService(backend, options, mockRedux );
            },
            deps: [XHRBackend, RequestOptions]
          },
          { provide: NgRedux, useClass : mockRedux }
        ]
      });
    };

    TestModule.configureTests(configure).then(testBed => {
      fixture = testBed.createComponent(RegTemplates);
      fixture.detectChanges();
      done();
    });

  });

  it('should instantiate Templates Component', async(inject([], () => {
    fixture.whenStable().then(() => {
      fixture.autoDetectChanges();
      expect(fixture.componentInstance).toBeDefined();
    });
  })));

  // To do 
});

Error says:

TypeError: jit__object_Object_38 is not a constructor

enter image description here


Solution

  • For me the issue was I was trying to use useClass instead of useValue, might be a blunder, but learnt it the hard way... ;) { provide: NgRedux, useValue : mockRedux } is the correct usage instead of { provide: NgRedux, useClass : mockRedux }

      beforeEach(done => {
        mockRedux = new MockRedux(mockState);
    
        const configure = (testBed: TestBed) => {
          testBed.configureTestingModule({
            imports: [ TestModule, DevExtremeModule, 
                RouterTestingModule, HttpModule ],
            declarations : [ RegTemplates, CommandButton, RegHeader, 
                RegStructureImage ],
            providers: [
              { provide: XHRBackend, useClass: MockBackend },
              {
                provide: HttpService,
                useFactory: (backend: XHRBackend, options: RequestOptions, redux: NgRedux<AppState> ) => {
                  return new HttpService(backend, options, mockRedux );
                },
                deps: [XHRBackend, RequestOptions]
              },
              { provide: NgRedux, useValue : mockRedux }
            ]
          });
        };
    
        TestModule.configureTests(configure).then(testBed => {
          fixture = testBed.createComponent(RegTemplates);
          fixture.detectChanges();
          done();
        });
    
      });