当我尝试对角度应用程序执行单元测试时..但是在运行测试时我遇到了错误答案

【问题标题】：As i am trying to perform unit testing on angular application..but i am getting below error while running the test当我尝试对角度应用程序执行单元测试时..但是在运行测试时我遇到了错误
【发布时间】：2020-10-27 11:03:20
【问题描述】：

1 个规范，1 个失败规格表 |失败 OverviewComponent 应该创建失败：无法解析路由器的所有参数：(?, ?, ?, ?, ?, ?, ?, ?)。错误：无法解析路由器的所有参数：(?, ?, ?, ?, ?, ?, ?, ?)。在 syntaxError (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:215:1) 在 CompileMetadataResolver._getDependenciesMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10807:1) 在 CompileMetadataResolver._getTypeMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10700:1) 在 CompileMetadataResolver._getInjectableTypeMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10922:1) 在 CompileMetadataResolver.getProviderMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10931:1) 在 http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10869:1 在 Array.forEach () 在 CompileMetadataResolver._getProvidersMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10829:1) 在 CompileMetadataResolver.getNgModuleMetadata (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10548:1) 在 JitCompiler._loadModules (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22567:1)

=============================================


describe('OverviewComponent', () => {
  let component: OverviewComponent;
  let fixture: ComponentFixture<OverviewComponent>;
  let router : Router

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[
        SharedModule,
        FlexLayoutModule,
       
       // RouterModule.forRoot(routes),
        RouterTestingModule
      ],
       
      declarations: [ OverviewComponent,
      FooterComponent,
      LoginComponent,
      ChangePasswordComponent,
      ForgotPasswordComponent,
      AppComponent],

      providers:[
      HttpClient,
      HttpHandler,
      DataService,
      NgxSpinnerService,
      Router,
      RouterModule,
      EmitterService,
      {provide: ActivatedRoute, 
        useValue: fakeActivatedRoute}
      ]
    })
    .compileComponents();
    

  }));

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


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

 
});

【问题讨论】：

请提供OverviewComponent的should create测试代码。看来你没有提供路由器
请看代码
@RazorB ：您的组件代码也是如此。如果我们不知道组件，我们如何知道单元测试行为:)

标签： angular6 karma-jasmine

【解决方案1】：

您需要为服务路由器创建模拟。

您也可以只使用 RouterTestingModule 并像这样监视导航功能...

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

import { MyModule } from './my-module';
import { MyComponent } from './my-component';

describe('something', () => {

    let fixture: ComponentFixture<LandingComponent>;
    let router: Router;

    beforeEach(() => {

        TestBed.configureTestingModule({
            imports: [
                MyModule,
                RouterTestingModule.withRoutes([]),
            ],
        }).compileComponents();

        fixture = TestBed.createComponent(MyComponent);
        router = TestBed.get(Router);

    });

    it('should navigate', () => {
        const component = fixture.componentInstance;
        const navigateSpy = spyOn(router, 'navigate');

        component.goSomewhere();
        expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']);
    });
});

字体：stackoverflow

【讨论】：