Angular 4 - 失败：无法解析ActivatedRoute的所有参数：（？，？，？，？，？，？，？，？）

Question

我参考了以下链接以获取答案，但是在我的情况下找不到任何可行的解决方案。 错误：（SystemJS）无法解析ActivatedRoute的所有参数：（？，？，？，？，？，？，？，？） 因此，我一直在尝试从提供者中删除Activated Route，但测试平台仍无法通过。它显示

“错误：没有为ActivatedRoute提供程序！”

所以这是我的代码，我想在使用Jasmine的Angular应用程序中运行我的测试平台。

import { ActivatedRoute } from '@angular/router';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterModule, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterModule, RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ ActivatedRoute ],
    })
    .compileComponents();
  }));

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

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

获取错误

- Lakindu Gunasekara

---

ActivatedRoute是由RouterModule已经定义的提供程序之一，你不应该再次包含它。此外，请注意存在一个名为RouterTestingModule的模块，可能更适合您的需求。 - jonrsharpe

Answer 1

在测试中，由于你自己创建了组件，而路由器没有为你创建并注入一个ActivatedRoute，因此你希望向组件中注入一个伪造的ActivatedRoute。你可以使用类似以下的代码：

describe('SomeComponent', () => {

  const fakeActivatedRoute = {
    snapshot: { data: { ... } }
  } as ActivatedRoute;

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ {provide: ActivatedRoute, useValue: fakeActivatedRoute} ],
    })
    .compileComponents();
  }));
});

- JB Nizet

---

问题是，你如何填充快照对象，使其正常工作？ - Zerok

为什么我必须假装呢？互联网上有没有我真的模拟阅读URL的例子？ - Lauri Elias

这个答案为我带来了解决方案：仍然在Angular 14中，我将RouterTestingModule添加到了imports中（无需添加{provide: ActivatedRoute, useValue: fakeActivatedRoute}）。 - Mike

Answer 2

这里提供了一个 Angular 7 的解决方案。

{
    provide: ActivatedRoute,
    useValue: {
        snapshot: {
            paramMap: {
                get(): string {
                    return '123';
                },
            },
        },
    },
},

- Pete

Answer 3

{
  provide: ActivatedRoute,
  useValue: {
    snapshot: {
      queryParamMap: {
        get(): number {
          return 6;
        }
      }
    }
  }
}

- Sourav Golui

Answer 4

我解决了这个问题，只需将RouterTestingModule添加到imports中，而不是将ActivatedRoute添加到Providers中。

- Aydin

---

这对我很有效。谢谢！ - Elte156

Answer 5

移除 ActivatedRoute，这不需要测试

- Neftalí Yagua