单元测试错误（业力）。没有 "exportAs" 设置为 "ngbPopover" 的指令

Question

我在我的 angular 页面中使用下面的 ngbPopover 并为其编写单元测试。它抛出一个编译错误。喜欢下面

没有 "exportAs" 设置为 "ngbPopover" 的指令（点击）="p1.open()" [错误 ->]#p1="ngbPopover">

    <span placement="bottom"  [ngbPopover]="popContent"  triggers="manual"
          (click)="p1.open()" #p1="ngbPopover">
    </span>




    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationsService as ToasterService } from 'angular2-notifications';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { testComponent } from './test.component';

describe('testComponent', () => {
  let component: testComponent;
  let fixture: ComponentFixture<testComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [testComponent],
      imports: [ FormsModule, ReactiveFormsModule  ],
    }).compileComponents();
  }));

  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({})
    };
    TestBed.configureTestingModule({
      declarations: [testComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        { provide: ToasterService, useValue: toasterServiceStub }
      ]
    });
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

如果我从 html 中删除 #p1，我的单元测试就会被编译。但不确定为什么会导致错误。请帮帮我

Answer 1

如果您只想在未构建 DOM 的情况下进行单元测试，请使用以下设置：

describe('testComponent', () => {
  let component: testComponent;

  // Note that you have to initialize the component only *once* via the TestBed, not multiples times as you did.
  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({}),
    };

    TestBed.configureTestingModule({
      providers: [
        testComponent,
        {provide: ToasterService, useValue: toasterServiceStub},
      ],
    });

    component = TestBed.get(testComponent);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

如果您想要的测试应该是一个集成测试，您希望在其中确保 HTML 被正确解析，那么您的实现 过于频繁地初始化组件 错过至少导入 Ngb。

describe('testComponent', () => {
  let component: testComponent;
  let fixture: ComponentFixture<testComponent>;

  // // Only configure the testing module once, not multiple times.
  // beforeEach(async(() => {
  //   TestBed.configureTestingModule({
  //     declarations: [testComponent],
  //     imports: [ FormsModule, ReactiveFormsModule  ],
  //   }).compileComponents();
  // }));

  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({})
    };

    TestBed.configureTestingModule({
      declarations: [testComponent],
      imports: [FormsModule, ReactiveFormsModule, NgbModule], // Here you were missing the NgbModule. You may also just import the sub-modules you're explicitely using (such as pagination)
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        { provide: ToasterService, useValue: toasterServiceStub }
      ]
    });
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    // You do not need to do this twice.
    // fixture = TestBed.createComponent(testComponent);
    // component = fixture.componentInstance;
    // fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

这两种实现方式都应该适合您的情况。这些实现之间的区别在于第一个实现不会构建整个 HTML DOM，而第二个实现会构建整个 HTML DOM。对于第一个工作，HTML 中使用的所有模块都需要存在。第二种实现基本上只初始化组件及其注入的依赖项。

单元测试错误（业力）。没有 "exportAs" 设置为 "ngbPopover" 的指令

Error in unit testing (karma). There is no directive with "exportAs" set to "ngbPopover"

unit-testing

karma-jasmine

angular