Angular2 testing with TestBed getting Zone undefined Error

Question

I've been working off the Angular tutorial https://angular.io/docs/ts/latest/guide/testing.html to build my first unit tests. I am able to get everything to work until I get to the TestBed example. When I add TestBed into the mix I get 'Uncaught ReferenceError: Zone is not defined'.

In my spec-bundle I zone declared and initialized the Testbed environment.

Spec-bundle

Error.stackTraceLimit = Infinity;

require('phantomjs-polyfill');

require('core-js/es6');
require('core-js/es7/reflect');

// Typescript emit helpers polyfill
require('ts-helpers');

// DO NOT REORDER: Dependency order needs to be strictly followed
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');

// RxJS
require('rxjs/Rx');

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting()
);

Object.assign(global, testing);

window.__karma__ && require('./karma-require');

Test file

import { ComponentFixture, TestBed } from '@angular/core/testing';   
import { SomeComponent } from './some.component';

let fixture: ComponentFixture<SomeComponent>;

describe('Orders Component', () => {

    let ordersComponentStub: SomeComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [SomeComponent]

        });
    });

});

Yep - I'm getting this as well. As Tye says the moment I ask for a testing module - TestBed.configureTestingModule the test fails with Zone not defined. I am running Angular 2.1.1 — The Unculled Badger, Dec 12 '16 at 15:03

score 3 · Answer 1 · edited Aug 17 '19 at 09:56

3

I fixed this in my project by adding the following to my configuration. I am using Wallaby.js so to fix this issue I added the following line to my module.exports

{pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true}

If you're using something like karma the same solution should apply.

edited Aug 17 '19 at 09:56

Shashank Vivek

16,888
8
62
104

answered Dec 12 '16 at 15:57

The Unculled Badger

760
4
18

I'm already pulling in the zone.js file as part of my spec-bundle. I attempted to move the zone.js directly to the karma.config and ran into additional errors about the order in which the promises are being imported. I also attempted to update the karma.config to match the watch and include set up you provided, no such luck. – Tye2545 Jan 24 '17 at 21:15
can you show your wallaby.js file example? where exactly did you put that? I assume it goes into files property? – Janatbek Orozaly Jan 18 '19 at 18:43

Angular2 testing with TestBed getting Zone undefined Error

1 Answers1