Question

我可以在测试输出中看到console.log(dummyComponentInstance);被调用并评估为undefined。

此外，永远不会记录console.log('beforeEach done');。

dummy.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DummyComponent } from './dummy.component';

describe('DummyComponent', () => {

  let dummyComponentInstance: DummyComponent;
  let fixture: ComponentFixture<DummyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DummyComponent]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DummyComponent);
        dummyComponentInstance = fixture.componentInstance;
        console.log('beforeEach done');
      });
  }));

  it('should work', () => {
    console.log(dummyComponentInstance);
    expect(dummyComponentInstance instanceof DummyComponent).toBe(true, 'should create DummyComponent');
  });
});

dummy.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'dummy',
  templateUrl: './dummy.component.html'
})
export class DummyComponent {
  public initialized = false;
}

运行测试后出错：

07 06 2017 13:27:09.187:INFO [launcher]: Starting browser PhantomJS
07 06 2017 13:27:09.437:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 4Vq49vX24cDAIZfjAAAA with id 34827962
LOG: undefined
PhantomJS 2.1.1 (Linux 0.0.0) DummyComponent should work FAILED
    invokeTask@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:605:36
    onInvokeTask@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:154:49
    invokeTask@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:604:48
    runTask@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:372:57
    drainMicroTaskQueue@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:765:42
    run@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:17951:29
    /tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:17964:31
    flush@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:17813:11
    resolvePromise@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:951:78
    resolvePromise@/tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:921:31
    /tmp/karma-typescript-bundle-27168S216WqzJyZ6g.js:998:31
    Expected false to be true, 'should create DummyComponent'.
    src/app/dummy.component.spec.js:21:98

Answer 1

你介意尝试一下吗？

从fakeAsync导入tick和@angular/core/testing。将.then()正文移到测试用例中，然后在那里使用fakeAsync()让我知道它是怎么回事。

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

it('should work', fakeAsync(() => {
    fixture = TestBed.createComponent(DummyComponent);
    dummyComponentInstance = fixture.componentInstance;
    tick();

    expect(dummyComponentInstance instanceof DummyComponent).toBe(true, 'should create DummyComponent');
}));

希望这适合你！

Answer 2

由于我的templateUrl文件包含需要在我的TestBed对象中设置的角形表单。

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [PageFormComponent],
    imports: [FormsModule]
  }).compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(PageFormComponent);
      pageFormComponentInstance = fixture.componentInstance;
    });
}));

Answer 3

所以有几件事，这可能只是我的困惑。 dummy.component.html真的存在吗？

致电时

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DummyComponent]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DummyComponent);
        dummyComponentInstance = fixture.componentInstance;
        console.log('beforeEach done');
      });
  }));

你基本上是在说“嘿，我有一些文件需要你去取，这是一个异步操作，请编译该模板，然后创建我的夹具。

如果该html文件不存在......它将在您的测试平台配置期间失败。我问，因为你没有显示该文件。

我将您的代码放入我的测试项目中，并且使用空模板工作正常。它还使用了一个空的templateUrl文件。

如果您还没有该文件，或者您不打算测试该文件，则可以通过避免fixture = TestBed.createComponent（DummyComponent）来节省开销成本。这是非常昂贵的（你说的是800~ms对15ms），因为它创造了许多额外的（和强大的）功能（比如将你的模板编译成一种影子DOM，据我所知）。

如果你有一个dummy.component.html文件，并且它有动态模块不知道如何解释的元素，那么你可以从@ angular / core导入NO_SCHEMA_ERRORS并将它放在你的配置TestBed中：

...
schemas: [NO_SCHEMA_ERRORS]
...

或者您可以教会测试平台如何提供这些元素（通常导入这些元素。但同样，这不是您的问题。您的问题似乎是dummy.component.html不存在。

希望这会有所帮助。

测试使用templateUrl的组件时出错

3 个答案: