1

I am using Angular CLI: 10.2.3 Node: 12.22.1 npm: 6.14.12

I am new to angular. I am trying to use jest for testing angular code (project runs fine without any errors, now adding some tests where I see issue). I have many custom services so using Spectator to mock them. I have few tests, one of them (failing) is below.

A simple component test is as below.

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { RouterTestingModule } from '@angular/router/testing';
import { MyComponent } from './my.component';

import { BasicAuthService } from './../../services/auth/basic-auth.service';
import { RefdataService } from '../../services/common/refdata.service';
import { of } from 'rxjs';
import {MyUploadService} from '../../services/data/my-upload.service';

import { 
  createComponentFactory, 
  createHostFactory, 
  Spectator, 
  SpectatorHost
} from '@ngneat/spectator/jest';

import { ObjectKeysPipe } from '../../pipes/common/object-keys.pipe';
import { DatePipe } from '@angular/common';

import { MockProxy, mock, mockReset } from 'jest-mock-extended'; 
import { NO_ERRORS_SCHEMA } from '@angular/core';

//Create a MatDialog mock class 
export class MatDialogMock {
  
  open() {
    return {
      afterClosed: () => of({action: true})
    };
  }
}

describe('MyUploadComponent', () => {

  let spectator: Spectator<MyUploadComponent>;

  const createComponent = createComponentFactory({
    component: MyUploadComponent,
    declarations: [MyUploadComponent, ObjectKeysPipe],
    imports: [HttpClientTestingModule,
              MatSnackBarModule,
              RouterTestingModule
             ],
    schemas: [NO_ERRORS_SCHEMA],
    mocks: [BasicAuthService,
            RefdataService,
            MyUploadService
           ],
    detectChanges: false
  });

  beforeEach(()=> {
    spectator= createComponent();
    spectator.detectChanges();
  });

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

});

I am getting the following error:

 FAIL  src/app/components/my-upload/my-upload.component.spec.ts
  ? Test suite failed to run

    TypeError: testing.waitForAsync is not a function

      38 |   let spectator: Spectator<MyUploadComponent>;
      39 |
    > 40 |   const createComponent = createComponentFactory({
         |                           ^
      41 |     component: MyUploadComponent,
      42 |     declarations: [MyUploadComponent, ObjectKeysPipe],
      43 |     imports: [HttpClientTestingModule,

      at Object.baseCreateComponentFactory [as createComponentFactory] (node_modules/projects/spectator/src/lib/spectator/create-factory.ts:77:5)
      at Object.createComponentFactory (node_modules/projects/spectator/jest/src/lib/spectator.ts:19:10)
      at src/app/components/my-upload/my-upload.component.spec.ts:40:27
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)
      at Object.<anonymous> (src/app/components/my-upload/my-upload.component.spec.ts:36:1)

I am unable to find anything related to this error. I am not using explicitly waitForAsync. What should be the issue here?

3
  • Try to update @ngneat/spectator to version 7.2.0 Commented Jun 28, 2021 at 17:24
  • Yes it is latest, still getting the same error. Following is from package-lock.json (still I uninstalled locally and globally and downloaded latest. "@ngneat/spectator": { "version": "7.2.0", "resolved": "registry.npmjs.org/@ngneat/spectator/-/spectator-7.2.0.tgz", "integrity": "sha512-FUdQqXCQEBwxAX33ZbU7h25cMKT24kesIX8ggiSHfGyyAJbYSJwZkzWLLpLgJqSQcPbe1dLCxCGA6tpIkGF9rg==", "dev": true, "requires": { "@testing-library/dom": "7.26.5", "jquery": "3.6.0", "replace-in-file": "^6.2.0", "tslib": "^2.0.0" } Commented Jun 28, 2021 at 17:51
  • 1
    Ok, since you're using Angular 10, try installing version 5.13.0. That should be the approximate version of when Angular 10 and ng-neat both released. npmjs.com/package/@ngneat/spectator?activeTab=readme . Check out the versions tab in that link. Commented Jun 28, 2021 at 18:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.