摩卡測試角參考錯誤：未定義區域

我正在嘗試對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'，但它沒有任何影響。有誰知道如何繞過或修復這個錯誤？

來源

2017-04-05 Rex

的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

希望這將幫助你。

來源

2017-05-22 20:52:27 HichamBI

對不起，我詳細解答了我的答案。我希望現在很清楚。謝謝。 – HichamBI

現在看起來好多了，謝謝。（不是我downvote順便說一句，我缺乏領域知識投票就此。） –

謝謝！我也欣賞線程。 :) – 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

來源

2017-04-06 05:32:57 Rex

摩卡測試角參考錯誤：未定義區域

回答

相關問題