Skip to main content

How to test declarations of lazy loaded modules in Angular

The process of testing declarations of a lazy loaded module is the same as testing declarations of regular modules. However, we might need declarations from the parent module which loads the lazy loaded module.

For such a case, MockBuilder supports an array of modules as the second parameter. There we can provide the lazy loaded module and its parent module.

beforeEach(() => MockBuilder(LazyComponent, [AppModule, LazyModule]));

Now all declarations in AppModule will be mocked and exported. The same happens with declarations in LazyModule except LazyComponent.

it('renders LazyComponent', () => {
const fixture = MockRender(Component1);


Live example‚Äč
import { Component, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';

import { LazyComponent, LazyModule } from './lazy-module';

selector: 'app-root',
template: '<router-outlet></router-outlet>',
class AppComponent {}

exports: [RouterModule],
imports: [RouterModule.forRoot([
loadChildren: () => import('./lazy-module').then(module => module.LazyModule),
path: '',
class AppModuleRouting {}

bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [AppModuleRouting],
class AppModule {}

describe('TestLazyModule', () => {
beforeEach(() =>
MockBuilder(LazyComponent, [AppModule, LazyModule]),

it('renders lazy component', () => {
const fixture = MockRender(LazyComponent);