为角度“提供者”设置基本单元测试答案

【问题标题】：Setting up a basic unit test for angular "provider"为角度“提供者”设置基本单元测试
【发布时间】：2020-06-28 15:50:29
【问题描述】：

我希望为我的 Angular 应用程序，特别是 Ionic 应用程序设置一个基本的单元测试。我正在使用 ionic 团队预先配置的解决方案来使用业力/茉莉花。包含的示例单元测试通过了，所以我开始为我自己的提供者编写一个新的单元测试。

这就是我遇到麻烦的地方，因为没有真正的样本可供参考。所以我刚刚创建了一个TestBed 并像您对应用程序所做的那样放入了最少需要的组件。然而，每次我运行单元测试时，都会出现一个相当模糊且无法描述的错误：Error: Illegal state: Could not load the summary for directive TestServiceProvider.

Error: Illegal state: Could not load the summary for directive TestServiceProvider.
            at syntaxError (webpack:///node_modules/@angular/compiler/esm5/compiler.js:486:21 <- karma-test-shim.js:66892:34)
            at CompileMetadataResolver.getDirectiveSummary (webpack:///node_modules/@angular/compiler/esm5/compiler.js:15085:0 <- karma-test-shim.js:81491:31)
            at JitCompiler.getComponentFactory (webpack:///node_modules/@angular/compiler/esm5/compiler.js:34301:25 <- karma-test-shim.js:100707:63)

查看堆栈跟踪，它看起来像是由 SyntaxError 引起的。虽然我不确定它发生了什么以及为什么会发生。知道在这个例子中做错了什么吗？

import { TestServiceProvider } from './test';
import { TestBed, TestModuleMetadata, async, ComponentFixture } from '@angular/core/testing';

describe('Test Service', () => {
  let component: TestServiceProvider;
  let fixture: ComponentFixture<TestServiceProvider>;

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

  beforeEach( () => {
    fixture = TestBed.createComponent(TestServiceProvider);
    component = fixture.componentInstance;
  });

  it('should add numbers', () => {
    expect(1+1).toBe(2);
  });
});

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the TestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class TestServiceProvider {

  constructor() {
    console.log('Hello TestServiceProvider Provider');
  }

}

【问题讨论】：

标签： angular typescript unit-testing ionic-framework karma-runner

【解决方案1】：

您不需要创建组件实例，因为我们只是在测试服务。只需注入它并在测试规范中对其进行测试。下面是开始测试所需的最少代码。

import { TestServiceProvider } from './test';
import { TestBed, TestModuleMetadata, async, ComponentFixture } from '@angular/core/testing';

describe('Test Service', () => {
  let component: TestServiceProvider;
  let fixture: ComponentFixture<TestServiceProvider>;

  beforeEach(async( () => {
    TestBed.configureTestingModule({
      providers: [TestServiceProvider]
    });
  service = TestBed.inject(TestServiceProvider);
  }));


  it('should add numbers', () => {
    expect(1+1).toBe(2);
  });
});

【讨论】：