How to fix "Error: Cannot call setTimeout from within a sync test." when testing for a service?

Viewed 1026

I'm trying to unit test a very basic service that uses ngx-socket-io using Jasmine + Karma.

I keep getting Error: Cannot call setTimeout from within a sync test.

Here's my service:

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { Message } from 'src/app/models/message';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  constructor(private socket: Socket) { };

  newMessages(){
    return this.socket.fromEvent<Message>('newMessage');
  }

  newMessage(message: String) {
    this.socket.emit('messageSent', message);
  }
}

This is my unit test:

import { TestBed } from '@angular/core/testing';
import { MessageService } from './message.service';
import SocketMock from 'socket.io-mock';
import { WrappedSocket } from 'ngx-socket-io/src/socket-io.service';

describe('MessageService', () => {
  let service: MessageService;
  let socket: WrappedSocket = new WrappedSocket(new SocketMock());
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers :[
        MessageService,
        {provide: WrappedSocket, useValue: socket}
      ]
    });
    service = TestBed.get(MessageService);
  });

  it('should be created', async () => {
    expect(service).toBeTruthy();
  });
});

Here is the full error output:

Error: Cannot call setTimeout from within a sync test.
    at SyncTestZoneSpec.onScheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:366:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:404:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:238:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:261:1)
    at scheduleMacroTaskWithCurrentZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1245:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2317:1
    at proto.<computed> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1569:1)
    at Request.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/engine.io-client/lib/transports/polling-xhr.js:268:1)
    at new Request (http://localhost:9876/_karma_webpack_/webpack:/node_modules/engine.io-client/lib/transports/polling-xhr.js:165:1)
    at XHR.request (http://localhost:9876/_karma_webpack_/webpack:/node_modules/engine.io-client/lib/transports/polling-xhr.js:92:1)

I just want to test that the service is created for now. What's going on, and how can I get the test to pass?

2 Answers

Try to use an async beforeEach. Probably setTimeout is called from there.

Check your test.ts file. Mainly the zone.js imports Order should be

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

Reference - https://github.com/angular/zone.js/issues/1058

Related