NullInjectorError: R3InjectorError(DynamicTestModule)[Router -> Function -> Function]: NullInjectorError: No provider for Function

Question

最近我開始學習 angular 並且在我的第一個項目（ToDo API）中，當我測試應用程序時遇到了一個問題： ng test 。 如您所見，錯誤在標題中。

這是我的組件，我得到錯誤：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';

import { TodosComponent } from './todos.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [ Router ],
      declarations: [ TodosComponent ]
    })
    .compileComponents();
  });

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

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

這是我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { RegistrationComponent } from './user/registration/registration.component';
import { LoginComponent } from './user/login/login.component';
import { TodosComponent } from './user/todos/todos.component';
import { CreateItemComponent } from './user/todos/create-item/create-item.component';
import { UserService } from './shared/user.service';
import { AuthInterceptor } from './auth/auth.interceptor';
import { ShowCompleteDeleteComponent } from './user/todos/show-complete-delete/show-complete-delete.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    RegistrationComponent,
    LoginComponent,
    TodosComponent,
    CreateItemComponent,
    ShowCompleteDeleteComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [UserService, {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

我將衷心感謝您的幫助！

Answer 1

使用 RouterTestingModule，它必須在導入中。

await TestBed.configureTestingModule({
  declarations: [ TodosComponent ]
  imports: [ RouterTestingModule ],
})
.compileComponents();