Question

我正在尝试从Angular官方网站的QuickStart Seed执行单元测试用例。

我想开始只使用Jasmine进行单元测试，所以我已从项目中删除了karma引用。包含单元测试用例的'app.component.spec.ts'可以很好地编译到JS（使用Gulp任务），但是，当我尝试执行它们时，我得到以下错误：

 var /** @type {?} */ meta = Reflect.getOwnMetadata('propMetadata', target.constructor) || {};
                                                    ^

TypeError: Reflect.getOwnMetadata is not a function
    at PropDecorator (node_modules\@angular\core\bundles\core.umd.js:463:53)
    at __decorate (app.component.js:5:110)
    at Object.<anonymous> (app.component.js:23:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

虽然没有尝试，但它可以正常使用QuickStart种子中提供的Karma设置。
但是，知道为什么不能只使用Jasmine会有所帮助？此外，是否需要导入任何其他JS库才能使其正常工作。

当前app.component.spec.ts :(再次与种子相同）

import { AppComponent } from '../app/app.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

describe('AppComponent', function () {
    let de: DebugElement;
    let comp: AppComponent;
    let fixture: ComponentFixture<AppComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        comp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('h1'));
    });

    it('should create component', () => expect(comp).toBeDefined());

    it('should have expected <h1> text', () => {
        fixture.detectChanges();
        const h1 = de.nativeElement;
        expect(h1.innerText).toMatch(/angular/i,
            '<h1> should say something about "Angular"');
    });
});

更新导致错误的方法在ES7 / reflect中定义。我添加了所需的导入（感谢@peeskillet寻求帮助）。更新的测试规范如下所示：

import '../node_modules/core-js/client/shim.min';
import 'core-js/es6';
import 'core-js/es7/reflect';
import '../node_modules/zone.js/dist/zone-node';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/proxy';
import 'zone.js/dist/jasmine-patch';    

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AppComponent, secondCmp } from '../app/app.component';

import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

describe('1st tests', () => {
    it('true is true', () => expect(true).toBe(true));
});

describe('AppComponent1', function () {
    let de: DebugElement;
    let comp: AppComponent;
    let fixture: ComponentFixture<AppComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent, secondCmp]
        }).compileComponents();
    }));

    beforeEach(() => {
        console.log(AppComponent.toString());
        fixture = TestBed.createComponent(AppComponent);
        comp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('#welcome'));
    });

    it('should create component', () => expect(comp).toBeDefined());

    it('should have setup success text', () => {
        fixture.detectChanges();
        const h1 = de.nativeElement;
        expect(h1.innerText).toContain('setup is successful');
    });
});

现在，我在TestBed.createComponent上遇到错误：

 ReferenceError: document is not defined
 Stack:
    ReferenceError: document is not defined
        at BrowserDomAdapter.defaultDoc (node_modules\@angular\platform-browser\bundles\platform-browser.umd.js:2015:71)

但是，上述测试适用于Karma测试运行器。

看起来，角度单位案例需要在浏览器等用户代理中可用的文档对象。

那么，我的问题是执行Angular单元测试用例总是需要浏览器吗？

单元测试Angular 2 JS代码，不使用浏览器和Karma测试运行器

0 个答案: