Error: Missing: SyncTestZoneSpec

[AbnerCrivellari]

I was trying to run unit tests using jasmine, karma and angular. But for some reason I'm getting the following error.

Chrome 64.0.3282 (Windows 10.0.0) ERROR Uncaught Error: Missing: SyncTestZoneSpec at http://localhost:9876/_karma_webpack_/vendor.bundle.js:63353

Chrome 64.0.3282 (Windows 10.0.0) ERROR Uncaught Error: Missing: SyncTestZoneSpec at http://localhost:9876/_karma_webpack_/vendor.bundle.js:63353

I already search for solution but all of them is not working.

p.s: I'm using the latest version for zone.js, jasmine and karma

[JiaLiPassion]

you need to import zone.js/dist/zone-testing in your application.

[AbnerCrivellari]

thank you bro, but it doesn't work for me , I will post my test.ts and karma.conf.js files.

test.ts

import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/jasmine-patch';
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/zone-testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare const __karma__: any;
declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

Karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

[JiaLiPassion]

@AbnerCrivellari , the loading order is not correct,

import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/jasmine-patch';
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';

you need to load proxy and sync-test before jasmine-patch, if you use the latest version of zone.js you can delete those lines just use zone-testing. so your test.ts will become

// you only need this one file, and you need to load it first.
import 'zone.js/dist/zone-testing';

import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare const __karma__: any;
declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

[AbnerCrivellari]

Thank you @JiaLiPassion. Now everything is working just fine. I'm using the latest version so I just use the code that you post importing zone testing.

[aironpower]

Hello @JiaLiPassion , I'm using zone.js 0.8.18. There's no 'zone-testing.js' file in 'the zone.js/dist/' folder

[JiaLiPassion]

@aironpower , zone-testing.js is a new bundle from 0.8.19, you can update to new version or import the separated files in following order.

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';

[aironpower]

Thank you @JiaLiPassion . It works!

[julienmarantes]

I got the same issue, updated to zone version 0.8.19 and replaced the imports by import 'zone.js/dist/zone-testing';

Now I get this error for each test of each .spec files.

HeadlessChrome 67.0.3396 (Windows 10.0.0) SomeService #getCurrentUser should return user object FAILED
        TypeError: Cannot read property 'assertPresent' of undefined
            at resetFakeAsyncZone node_modules/@angular/core/@angular/core/testing.es5.js:308:1)
            at Object.<anonymous> node_modules/@angular/core/@angular/core/testing.es5.js:1015:1)
            at ZoneQueueRunner.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.jasmine.QueueRunner.ZoneQueueRunner.execute node_modules/zone.js/dist/zone-testing.js:437:1)
HeadlessChrome 67.0.3396 (Windows 10.0.0): Executed 120 of 120 (120 FAILED) ERROR (4.725 secs / 4.633 secs)

[JiaLiPassion]

@yume117, could you provide a reproduce repo?

[julienmarantes]

Unfortunately I can't since it's client code. It's a basic angular cli project on Angular 4

I can share my dep list :

{
  "name": "project",
  "version": "0.0.11a",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "karma start ./karma.conf.js --log-level error",
    "test-dev": "karma start ./karma.conf.js",
    "test-jenkins": "ng test --watch=false",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular-font-awesome": "^3.1.1",
    "angular2-logger": "^0.6.0",
    "chart.js": "^2.7.1",
    "core-js": "^2.4.1",
    "crypto-js": "^3.1.9-1",
    "dakayl_angular2-materialize": "^15.1.13",
    "dakayl_materialize-css": "^0.101.3",
    "font-awesome": "^4.7.0",
    "jquery": "^2.2.4",
    "leaflet": "^1.2.0",
    "moment": "^2.20.1",
    "mydatepicker": "^2.6.1",
    "ng2-charts": "^1.6.0",
    "ngx-scroll-event": "^1.0.5",
    "rxjs": "^5.4.2",
    "screenfull": "^3.3.1",
    "socket.io": "^2.0.4",
    "vis": "^4.21.0",
    "webpack": "^3.8.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.5",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

[JiaLiPassion]

@AbnerCrivellari , So if you use old version of zone.js, it will work? Could you try the newest version of zone.js 0.8.26?

I am not sure what the problem, if you can create a simple reproduce repo or share some test code, I can help to debug.

[julienmarantes]

I tried with zone.js 0.8.26 and get the exact same result.

I get thoses issues since I added aliases in tsconfig files for clearer import :

Example :

"baseUrl": "src",
    "paths": {
      "@app/*": [
        "app/*"
      ],
      "@core/*": [
        "app/core/*"
      ],
      "@common/*": [
        "app/common/*"
      ],
      "@models/*": [
        "app/models/*"
      ],
      "@env/*": [
        "environments/*"
      ],
      "@assets/*": [
        "assets/*"
      ]
    }

[JiaLiPassion]

So if you remove those aliases, the issue will be gone? I am not sure why it related to zone.js. But I can try to create a project to test.

[julienmarantes]

Yes if I delete them I have no issue. But I don't understand what is going on with them. They work normally exept for the test with karma

[JiaLiPassion]

@yume117, yeah, it is really weird, if you can provide a sample project, I would like to debug this one. I also want to know why it happened.

[consulbit]

Same problem here as pointed out by @yume117, if I remove the aliases the tests run fine but with the aliases they don't start throwing the exception reported by @AbnerCrivellari (Uncaught Error: Missing: SyncTestZoneSpec).

[JiaLiPassion]

@consulbit , could you provide a reproduce repo?

[consulbit]

Hi @JiaLiPassion,

sorry for the delay but I couldn't answer before.

I don't have a repo to reproduce the problem but I manage to solve it updating the zone.js to the version 0.8.26 and using the following import in the test.ts:

import 'zone.js/dist/zone-testing';

but I had to remove all the other imports referring the zone.js.

Thanks