Question

我正在尝试对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很快就没有被实例化以定义{{ 1}}。我尝试在我的测试代码中Zone，但它没有任何影响。有谁知道如何绕过或修复此错误？

Answer 1

Radzen博客设置已过时。

以下是使用mocha-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应用程序。它适用于Angular 4+版本。

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

希望能帮助你。

Answer 2

我在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');

并且需要使用mocha的cli命令标志--require

“正确”应用它

Mocha测试角度referenceError：未定义区域

2 个答案: