angular2路由器的Jasmine测试用例

我有一个带有按钮的

app.component.html

文件，可以导航到另一个名为

HomeComponent

<button (click)="nav()" id="nav">Navigate</button>
 <router-outlet></router-outlet>

和我的

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RouterModule, Routes,Router } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{ path: "", component: AppComponent}]),
    RouterModule.forChild([{ path: "home", component: HomeComponent}])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  let location, router;
  let mockRouter

  beforeEach(() => {
    mockRouter = {
      navigate: jasmine.createSpy('navigate')
    };
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: HomeComponent }
      ])],
      declarations: [AppComponent, HomeComponent]
    });
  });




  it('should go home', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
     console.log(mockRouter.navigate);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    spyOn(component, 'nav');

    fixture.detectChanges();

    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

这是我的spec文件

app.component.spec.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RouterModule, Routes,Router } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{ path: "", component: AppComponent}]),
    RouterModule.forChild([{ path: "home", component: HomeComponent}])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  let location, router;
  let mockRouter

  beforeEach(() => {
    mockRouter = {
      navigate: jasmine.createSpy('navigate')
    };
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: HomeComponent }
      ])],
      declarations: [AppComponent, HomeComponent]
    });
  });




  it('should go home', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
     console.log(mockRouter.navigate);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    spyOn(component, 'nav');

    fixture.detectChanges();

    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

我得到的结果是

---

您已经监视了

路由器

，但尚未将其提供给

测试床

环境。尝试添加

providers: [
   { provide: Router, useValue: mockRouter},
], 

声明之后

此外，由于您没有单击任何链接，因此不需要包括

RouterTestingModule

参考文献：

---

您已经监视了

路由器

，但尚未将其提供给

测试床

环境。尝试添加

providers: [
   { provide: Router, useValue: mockRouter},
], 

声明之后

此外，由于您没有单击任何链接，因此不需要包括

RouterTestingModule

参考文献：

---

要为路由器创建单元测试用例，您可以执行以下操作：

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, HomeComponent]
    });
  });

  it('should go home', async(inject([Router], (router) => {
    spyOn(router, 'navigate'); //added a spy on router
    let fixture = TestBed.createComponent(AppComponent);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    expect(router.navigate).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

---

要为router.navigate创建单元测试用例，您可以执行以下操作：

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, HomeComponent]
    });
  });

  it('should go home', async(inject([Router], (router) => {
    spyOn(router, 'navigate'); //added a spy on router
    let fixture = TestBed.createComponent(AppComponent);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    expect(router.navigate).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

---

我已经提供了提供程序，但是仍然得到相同的错误我已经提供了提供程序，但是仍然得到相同的错误这对我来说是有效的，但是不推荐在v12中删除

async

。文档说使用“@angular/core/testing”中的

waitForAsync

，这对我也适用。这对我很有效，但v12中不推荐删除

async

。医生说使用“@angular/core/testing”中的

waitForAsync

，这对我也很有用。