Angular 4测试报错：无法解析ActivatedRoute参数及无提供者问题

我来帮你搞定这个测试报错的问题——这个错误在Angular路由组件的单元测试里非常常见，核心原因是ActivatedRoute依赖了Angular路由系统的多个内部服务，直接把它加到providers里或者完全不提供，都会导致依赖注入失败。

问题根源拆解 #

• 你第一次遇到的Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)：是因为ActivatedRoute的构造函数需要多个Angular内部提供的依赖，测试环境中没有这些依赖，所以无法实例化它。
• 移除ActivatedRoute后出现的No provider for ActivatedRoute!：是因为你的SomeComponent依赖了这个服务，测试时必须给它提供一个可用的实例。

两种可行的解决方案 #

方案1：使用RouterTestingModule配置基础路由环境

Angular专门提供了RouterTestingModule来处理路由相关的测试，它会自动提供路由服务的模拟实现，包括ActivatedRoute。你只需要导入它，甚至可以配置空路由或者测试用路由：

import { ActivatedRoute } from '@angular/router';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { SomeComponent } from './some.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ 
        // 用RouterTestingModule替代RouterModule，它已经包含必要的路由模块
        RouterTestingModule.withRoutes([]) // 可以根据测试需求配置路由
      ],
      declarations: [ SomeComponent ],
      // 不需要手动添加ActivatedRoute到providers
    })
    .compileComponents();
  }));

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

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

方案2：手动MockActivatedRoute（适合需要模拟特定路由数据的场景）

如果你的组件用到了ActivatedRoute的特定属性（比如params、queryParams、snapshot.paramMap），直接用RouterTestingModule可能满足不了需求，这时候可以手动提供一个模拟的实例：

import { ActivatedRoute } from '@angular/router';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs'; // 用于模拟Observable类型的属性
import { SomeComponent } from './some.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            // 模拟组件需要的路由参数，比如组件依赖id参数
            params: of({ id: 'test-123' }),
            // 模拟snapshot的paramMap
            snapshot: {
              paramMap: {
                get: (key: string) => key === 'id' ? 'test-123' : null
              }
            },
            // 可以根据组件需求添加其他属性，比如queryParams、data等
          }
        }
      ]
    })
    .compileComponents();
  }));

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

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

额外注意点 #

• 不需要同时导入RouterModule和RouterTestingModule，后者已经包含了前者的必要功能，重复导入可能导致冲突。
• 模拟ActivatedRoute时，只需要提供组件实际用到的属性即可，不用完全复刻所有方法和属性。

内容的提问来源于stack exchange，提问作者Lakindu Gunasekara