@angular/router/testing

RouterTestingHarness

Class

A testing harness for the Router to reduce the boilerplate needed to test routes and routed components.

  
    class RouterTestingHarness {
}

fixture

ComponentFixture<{ routerOutletData: WritableSignal<unknown>; }>

Fixture of the root component of the RouterTestingHarness

detectChanges

void

Instructs the root fixture to run change detection.

@returnsvoid

routeDebugElement

DebugElement | null

The DebugElement of the RouterOutlet component. null if the outlet is not activated.

routeNativeElement

HTMLElement | null

The native element of the RouterOutlet component. null if the outlet is not activated.

navigateByUrl

2 overloads

Triggers a Router navigation and waits for it to complete.

The root component with a RouterOutlet created for the harness is used to render Route components. The root component is reused within the same test in subsequent calls to navigateForTest.

When testing Routes with a guards that reject the navigation, the RouterOutlet might not be activated and the activatedComponent may be null.

{@example router/testing/test/router_testing_harness_examples.spec.ts region='Guard'}

@paramurlstring

The target of the navigation. Passed to Router.navigateByUrl.

@returnsPromise<{} | null>

Triggers a router navigation and waits for it to complete.

The root component with a RouterOutlet created for the harness is used to render Route components.

{@example router/testing/test/router_testing_harness_examples.spec.ts region='RoutedComponent'}

The root component is reused within the same test in subsequent calls to navigateByUrl.

This function also makes it easier to test components that depend on ActivatedRoute data.

{@example router/testing/test/router_testing_harness_examples.spec.ts region='ActivatedRoute'}

@paramurlstring

The target of the navigation. Passed to Router.navigateByUrl.

@paramrequiredRoutedComponentTypeType<T>

After navigation completes, the required type for the activated component of the RouterOutlet. If the outlet is not activated or a different component is activated, this function will throw an error.

@returnsPromise<T>

create

Promise<RouterTestingHarness>

Creates a RouterTestingHarness instance.

The RouterTestingHarness also creates its own root component with a RouterOutlet for the purposes of rendering route components.

Throws an error if an instance has already been created. Use of this harness also requires destroyAfterEach: true in the ModuleTeardownOptions

@paraminitialUrlstring | undefined

The target of navigation to trigger before returning the harness.

@returnsPromise<RouterTestingHarness>