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);  expect(ngMocks.formatText(fixture)).toEqual('lazy-loaded');});


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';
@Component({  selector: 'target',  template: '<router-outlet></router-outlet>',})class AppComponent {}
@NgModule({  exports: [RouterModule],  imports: [RouterModule.forRoot([    {      loadChildren: () => import('./lazy-module').then(module => module.LazyModule),      path: '',    },  ])],})class AppModuleRouting {}
@NgModule({  bootstrap: [AppComponent],  declarations: [AppComponent],  imports: [AppModuleRouting],})class AppModule {}
describe('TestLazyModule', () => {  beforeEach(() => MockBuilder(LazyComponent, [AppModule, LazyModule]));
  it('renders lazy component', () => {    const fixture = MockRender(LazyComponent);    expect(ngMocks.formatText(fixture)).toEqual('lazy-component');  });});