使用 Jest 和 Testbed 测试 Angular 9 服务

Question

在我的 Angular 9 项目中，我添加了 jest 并删除了 Jasmine 和 Karma。

我正在测试名为 CorrectionService 的服务，该服务依赖于名为 RemoteService.

的服务

我想监视 RemoteService 以查看是否调用了某个方法。我已经通过开玩笑 RemoteService.

手动模拟成功地完成了它

现在我想使用 TestBed。我之前的Jasmine测试是这样的：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';
import { CorrectionService } from './correction.service';
import { Answer, Question } from './setting';
import { IChoosed } from './question/question.component';
import { RemoteService } from './remote.service';


describe('CorrectionService', () => {
  let service: CorrectionService;
  let remoteServiceSpy: jasmine.SpyObj<RemoteService>

  beforeEach(() => {
    const spy = jasmine.createSpyObj('RemoteService', ['saveToRemoteAdditionalData']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        CorrectionService,
        {provide: RemoteService, useValue: spy}
      ]
    });
    service = TestBed.inject(CorrectionService);
    remoteServiceSpy = TestBed.inject(RemoteService) as jasmine.SpyObj<RemoteService>;
  });

我试过这样使用 jest 模拟：

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { CorrectionService } from './correction.service';
import { Answer, Question } from './setting';
import { IChoosed } from './question/question.component';
import { RemoteService } from './remote.service';


describe('CorrectionService', () => {
  let service: CorrectionService;
  this.remoteServiceStub = {} as RemoteService;

  beforeEach(() => {
    this.remoteServiceStub = {saveToRemoteAdditionalData: jest.fn()};

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers:[
        CorrectionService,
        {provide:RemoteService, useValue: this.remoteServiceStub}
      ]
    });
    this.service = TestBed.inject(CorrectionService);
    TestBed.inject(RemoteService);
  });

但测试无效，我得到：

 Can't resolve all parameters for CorrectionService: (?).

我猜RemoteService没有注入。我做错了什么？

Answer 1

我发现了问题，我在 tsconfig.spec.json 中放错了 emitDecoratorMetadata 属性。它不在 compilerOptions.

中

我把文件的全部内容写在这里供以后参考：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
  "emitDecoratorMetadata": true,
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "esModuleInterop": true,
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

使用 Jest 和 Testbed 测试 Angular 9 服务

Testing a Angular 9 service using Jest and Testbed

unit-testing

jasmine

jestjs

angular