Angular 单元测试：预期 3 个参数，但得到 1 个答案

【问题标题】：Angular Unit Test : Expected 3 arguments, but got 1Angular 单元测试：预期 3 个参数，但得到 1 个
【发布时间】：2021-08-23 14:34:03
【问题描述】：

我目前正在对 Angular 应用程序进行单元测试。我是 Angular 单元测试的新手。为了节省时间，我已经从https://github.com/gothinkster/angular-realworld-example-app 下载了 Angular 应用程序。由于我是单元测试的新手，我从https://www.youtube.com/watch?v=ylJUkPlmdAg 和https://www.youtube.com/watch?v=45BuZAfFU0o 看到了一些与单元测试相关的视频

我正在尝试对HomeComponent 进行单元测试。您可以从https://github.com/gothinkster/angular-realworld-example-app/blob/master/src/app/home/home.component.ts 找到 HomeComponent 代码。 home.component.spec.ts 文件代码位于：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ApiService, TagsService, UserService, JwtService } from '../core';
import { HttpClient, HttpErrorResponse, HttpClientModule, HttpHandler } from '@angular/common/http';

import { HomeComponent } from './home.component';
import { of } from 'rxjs';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let TAGS;
  let mockTagsService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [ HomeComponent ],
      providers: [
        TagsService, 
        UserService, 
        ApiService, 
        JwtService, 
        HttpClient, 
        HttpClientModule, 
        HttpHandler
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    // fixture = TestBed.createComponent(HomeComponent);
    // component = fixture.componentInstance;
    // fixture.detectChanges();

    TAGS = [{"tags":["HuManIty","Hu‌Man‌Ity","Gandhi","HITLER","SIDA","BlackLivesMatter","Black‌Lives‌Matter","test","dragons","butt"]}];

    mockTagsService = jasmine.createSpyObj(['getAll']);
    component = new HomeComponent(mockTagsService);
  });

  // it("should create the component", () => {

  //   expect(component).toBeTruthy();

  // });
  
  it("getall tags", () => {
    mockTagsService.getAll.and.returnValue(of(true));
  });
});

Visual Studio 代码在此处显示错误消息Expected 3 arguments, but got 1：component = new HomeComponent(mockTagsService);。它还建议 - home.component.ts(14, 5): An argument for 'tagsService' was not provided.。

我该如何解决这个问题？

【问题讨论】：

HomeComponent 构造函数有三个参数：router、tagService 和 userService。您需要将每个依赖项的值传递给构造函数。
@MattU 由于我是 Un it Test 的新手，您能根据它提供答案吗？
这与单元测试没有任何关系您的构造函数需要三个参数。你需要传递三个参数。
@RoddyoftheFrozenPeas 您能否提供一个解决方案作为答案？
component = new HomeComponent(mockTagsService, routerService, userService);

标签： angular angular-unit-test

【解决方案1】：

如果你要模拟任何服务，你可以像下面那样做

 const mockTagsService = jasmine.createSpyObj('TagsService', ['<method name to mock>']);

await TestBed.configureTestingModule({
      imports: [...],
      declarations: [... ],
      providers: [
      { provides: TagsService, useClass: mockTagsService }
      ]
    }).compileComponents();

然后您可以模拟该行为并为该行为提供如下值

mockTagsService.<your method name>.and.returnValue(<your return value>)

这是您可以模拟并为此提供数据的简单方法。关注这个 (https://angular.io/guide/testing-services) 了解更多详情

【讨论】：