使用 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"
  ]
}