摩卡测试角参考错误:未定义区域
问题描述:
我正在尝试对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
希望这将帮助你。
答
,我发现这个垫片在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
对不起,我详细解答了我的答案。我希望现在很清楚。谢谢。 – HichamBI
现在看起来好多了,谢谢。 (不是我downvote顺便说一句,我缺乏领域知识投票就此。) –
谢谢!我也欣赏线程。 :) – Rex