使用 Jest 和 Testbed 测试 Angular 9 服务 [英] Testing a Angular 9 service using Jest and Testbed

问题描述

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

In my Angular 9 project I added jest and removed Jasmine and Karma.

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

I'm testing a service called CorrectionService that has a dependency of a service called RemoteService.

我想监视 RemoteService 以查看是否调用了某个方法.我已经通过玩笑手动模拟 RemoteService 成功地完成了它.

I want to spy on the RemoteService to see if a method is called. I've successfully done it by mocking manually with jest the RemoteService.

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

Now I want to use TestBed. My previous Jasmine test is this:

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 模拟:

I've tried to use jest mock this way:

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);
  });

但是测试没有用，我得到了:

But the tests arent working and I got:

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

我猜 RemoteService 没有被注入.我做错了什么?

I guess RemoteService is not injected. What I'm doing wrong?

推荐答案

我发现了问题，我在 tsconfig.spec.json 中有一个错误放置的 emitDecoratorMetadata 属性.它不在 compilerOptions 中.

I found the problem, I had a misplaced emitDecoratorMetadata attribute in tsconfig.spec.json. It wasn't in the compilerOptions.

我将文件的全部内容写在这里以供将来参考:

I write the full content of the file here for future reference:

{
  "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 服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！