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');
});

Profit.

Live example‚Äč

https://github.com/help-me-mom/ng-mocks/blob/master/examples/TestLazyModule/test.spec.ts
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');
});
});