路由的角度7写作测试

Question

我制作了一个包含一些组件的应用程序，并在页面之间进行了导航，它们工作正常。我想为我的路由部分编写一个测试。

这是我的count

router.spec.ts

我的 splash-routing.module.ts

    import { Location } from "@angular/common";
    import { TestBed, fakeAsync, tick, async } from "@angular/core/testing";
    import { RouterTestingModule } from "@angular/router/testing";
    import { Router } from "@angular/router";

    import { HomeComponent } from './home/home.component';
    import { AboutComponent } from './about/about.component';
    import { AppComponent } from '../app.component';
    //import { routes } from './splash-routing.module';

    describe('AppComponent', () => {
      let location: Location;
      let router: Router;
      let fixture;
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [HomeComponent, AboutComponent, AppComponent],
          imports: [RouterTestingModule]
        }).compileComponents();
        router = TestBed.get(Router);
        location = TestBed.get(Location);

        fixture = TestBed.createComponent(AppComponent);
        router.initialNavigation();
      }));

      it('should create the app', async(() => {
        const fixture = TestBed.createComponent(AppComponent);
        console.log(fixture);
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
      }));

      it('navigate to "home" redirects you to /home', fakeAsync(() => { 
        router.navigate(['home']); 
        tick(); 
        expect(location.path()).toBe('/home'); 
      }));

      // it('navigate to "about" takes you to /about', fakeAsync(() => {
      //   router.navigate(['about']);
      //   tick();
      //   expect(location.path()).toBe('/about');
      // }));
    });

当我使用 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { RootComponent } from './root/root.component'; import { AboutComponent } from './about/about.component'; import { PricingComponent } from './pricing/pricing.component'; import { ContactComponent } from './contact/contact.component'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; export const routes: Routes = [ {path: '', component: RootComponent, children: [ {path: '', component: HomeComponent}, {path: 'home', component: HomeComponent}, {path: 'about', component: AboutComponent}, {path: 'pricing', component: PricingComponent}, {path: 'contact', component: ContactComponent}, {path: 'login', component: LoginComponent}, {path: 'notfound', component: PageNotFoundComponent}, { path: '**', // bonus: all routes not defined forward to /home redirectTo: 'notfound' }, {path: '', redirectTo: 'home'}, ]}, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class SplashRoutingModule { } 运行测试时，出现以下错误，我该如何解决，该错误又是什么呢？

可以向我解释我在做什么错，因为我还需要在这里编写其他组件的测试！

Answer 1

您需要使用方法routes为RouterTestingModule指定withRoutes。

当前，您没有指定任何路由，这就是导致出现Cannot match any routes. URL Segment home错误的原因。

将您的代码更改为以下内容：

TestBed.configureTestingModule({
      declarations: [HomeComponent, AboutComponent, AppComponent],
      imports: [RouterTestingModule.withRoutes(routes)] <---------- 
    }).compileComponents();