摩卡测试角参考错误:未定义区域

摩卡测试角参考错误:未定义区域

问题描述:

我正在尝试对Angular 4.0.0组件进行测试,并使用了Mocha。我收到以下错误:摩卡测试角参考错误:未定义区域

var FakeAsyncTestZoneSpec = Zone['FakeAsyncTestZoneSpec']; 

ReferenceError: Zone is not defined` 

这里是我的测试代码:

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; 
    }); 
}); 

我一直在抓我的头了一下,我已经通过每一个留言板和教程我能找到了,我的最佳侦察已经降临,Zone.js没有被实例化,不足以定义Zone。我试图在我的测试代码中使用import 'zone.js',但它没有任何影响。 有谁知道如何绕过或修复这个错误?

的radzen博客设置是过时。

这里是启动与摩卡的WebPack插件测试设置:

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; 

我使用:

Angular v4.1.1. 
    Webpack v2.2.1. 
    jsdom v10.1.0. 
    mocha-webpack. 

我已经写了一个线程解释如何设置的WebPack配置来测试与Mocha,Chai和sinon的角度应用。它适用于Angular 4+版本。

http://hichambi.github.io/2016/12/27/testing-angular2-with-webpack-mocha-on-browser-and-node.html

希望这将帮助你。

+0

对不起,我详细解答了我的答案。我希望现在很清楚。谢谢。 – HichamBI

+1

现在看起来好多了,谢谢。 (不是我downvote顺便说一句,我缺乏领域知识投票就此。) –

+0

谢谢!我也欣赏线程。 :) – Rex

,我发现这个垫片在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'); 

,并需要“正确的”应用它采用摩卡的CLI命令标志--require