Angular单元测试时ActivatedRoute报Can't resolve all parameters错误如何解决

报错核心原因 #

你的报错是因为在SearchbarComponent的@Component装饰器中手动注册了ActivatedRoute作为组件级提供者，其优先级高于TestBed配置的模块级Mock提供者，导致测试运行时组件会尝试实例化原生ActivatedRoute类，而原生类依赖的多个参数在测试环境中未提供，因此抛出参数解析失败的错误。

修复步骤 #

• 第一步：移除组件元数据中多余的组件级ActivatedRoute注册
  ActivatedRoute由Angular路由模块全局提供，不需要在组件内单独声明提供者，删除@Component配置中的providers: [ ActivatedRoute ]行即可。
• 第二步：修正测试中ActivatedRoute的Mock内容
  你当前Mock的queryParams返回的是convertToParamMap生成的ParamMap对象，但组件代码中直接通过params.search取值，ParamMap对象需要调用get()方法才能获取属性，你可以直接调整Mock逻辑返回普通对象的Observable，匹配组件现有取值逻辑。

修正后代码 #

组件代码 #

import { Input, Component, HostListener, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
// ...
@Component({
  selector: 'searchbar',
  templateUrl: './searchbar.component.html',
  styleUrls: ['./searchbar.component.scss']
})
export class SearchbarComponent implements OnInit {
  currentSearch: string = '';
  constructor(private route: ActivatedRoute) { 
    this.route.queryParams
    .subscribe(params => {
        this.currentSearch = params.search;
    });
  }
// ...
}

测试代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';

import { SearchbarComponent } from './searchbar.component';

describe('SearchbarComponent', () => {
  let component: SearchbarComponent;
  let fixture: ComponentFixture<SearchbarComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ RouterTestingModule ],
      declarations: [ SearchbarComponent ],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of({ search: "" })
          }
        }
    ]
    })
    .compileComponents();
  });

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

如果你后续需要使用类型更规范的ParamMap，可以将组件取值逻辑调整为this.route.queryParamMap.subscribe(params => this.currentSearch = params.get('search'))，对应的Mock还原为queryParamMap: of(convertToParamMap({ search: "" }))即可。

内容的提问来源于stack exchange，提问作者Kipotuzer TT