Menu
I am trying to run a test on Angular 4.0.0 components and I am using Mocha. I am receiving the following error:
var FakeAsyncTestZoneSpec = Zone['FakeAsyncTestZoneSpec'];
ReferenceError: Zone is not defined`
here is my test code:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {SocketService} from '../src/app/services/socket.service';
import 'mocha';
describe('BannerComponent (inline template)', () => {
let comp: SocketService;
let fixture: ComponentFixture<SocketService>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ SocketService ], // declare the test component
});
fixture = TestBed.createComponent(SocketService);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
});
I have been scratching my head for a bit now, I have gone through every message board and tutorial I could find, the best of my sleuthing has come down to, Zone.js is not being instantiated soon enough to define Zone. I tried to import 'zone.js' inside my test code but it had no affect.
Would anyone know how to bypass or fix this error?
998
The radzen blog setup is out dated.
Here is a setup to launch test with mocha-webpack plugin :
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone-node');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
const testing = require('@angular/core/testing');
const browser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
const jsdom= require("jsdom");
const { JSDOM } = jsdom;
const window = (new JSDOM('<!doctype html><html><body></body></html>')).window;
const document = window.document;
global.window = window;
global.document = document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;
global.Node = window.Node;
I'm using :
Angular v4.1.1.
Webpack v2.2.1.
jsdom v10.1.0.
mocha-webpack.
I've wrote a thread explaining how to setup webpack configuration to test an Angular application with Mocha, Chai and sinon. It's work with Angular 4+ release.
http://hichambi.github.io/2016/12/27/testing-angular2-with-webpack-mocha-on-browser-and-node.html
Hope that will help you.
52
I found this shim at http://www.radzen.com/blog/testing-angular-webpack-mocha/
var jsdom = require('jsdom')
var document = jsdom.jsdom('<!doctype html><html><body></body></html>');
var window = document.defaultView;
global.document = document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
and needed to apply it "correctly" using mocha's cli command flag --require
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With