Writing unit test cases for lazy loaded module angular

Question

Getting NgModuleFactoryLoader is deprecated: the string form of loadChildren is deprecated, and NgModuleFactoryLoader is part of its implementation. See LoadChildren for more details. warning and not able to stub the module for testing the lazy loaded module

Below is the code

import { Location } from '@angular/common';
    import { TestBed, ComponentFixture } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { Router } from '@angular/router';
    import { AppComponent } from './app.component';
    import { AppConfigService } from './services/appConfig.service';
    import { TranslateModule } from '@ngx-translate/core';
    import { NgModuleFactoryLoader } from '@angular/core';
    import { VehicleModule} from './views/vehicle/vehicle.module';
    import { DriverModule} from './views/driver/driver.module';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

const routes: Routes = [{
    path: 'admin',
    data: { preload: false },
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  { path: '', component: FrontpageComponent }];

    describe('Router: App', () => {

      let location: Location;
      let router: Router;
      let fixture: ComponentFixture<AppComponent>;
      let loader: any;

      beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [
            BrowserAnimationsModule,
            TranslateModule.forRoot(),
            RouterTestingModule.withRoutes(routes),
          ],
          declarations: [AppComponent],
          providers: [AppConfigService]
        });

        router = TestBed.get(Router);
        location = TestBed.get(Location);

        loader = TestBed.get(NgModuleFactoryLoader);
        loader.stubbedModules = {
          'VehicleModule': VehicleModule,
          'DriverModule': DriverModule
        };

        fixture = TestBed.createComponent(AppComponent);

        router.resetConfig([
          {
            path: 'vehicle',
            loadChildren: 'VehicleModule'
          },
          {
            path: 'driver',
            loadChildren: 'DriverModule'
          },
          {
            path: '',
            loadChildren: 'VehicleModule'
          }
        ]);

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

      it('should create APP', () => {
        expect(fixture.componentInstance).toBeDefined();
      });

     it('should navigate to /student lazy loaded ,pdule', fakeAsync(() => {

        const loader = TestBed.get(NgModuleFactoryLoader);
        loader.stubbedModules = {lazyModule: StudentModule};

        router.resetConfig([
          {path: 'student', loadChildren: 'lazyModule'},
        ]);

        router.navigate(['student'])

        tick();

        expect(location.path()).toBe('/student');
      }));
    });

have you had any luck with replacing the deprecated code?

Lossan
– Lossan

2021-12-10 10:54:57 +00:00
Commented Dec 10, 2021 at 10:54 — Lossan
– Lossan, Commented Dec 10, 2021 at 10:54

Prokhor Sednev · Accepted Answer · 2022-09-13 09:56:05Z

loadChildren now needs a function, which will load a module:

{
    path: 'login',
    loadChildren: () => import('./login/login.module').then(mdule=>mdule.LoginModule),

},

For some reasons, jasmine cannot load these modules from original config, so you should reset config and give to jasmine these modules:

    router.resetConfig([
      {
        path: 'vehicle',
        loadChildren: () => Promise.resolve(VehicleModule),
      },
      {
        path: 'driver',
        loadChildren: () => Promise.resolve(DriverModule),
      },
      {
        path: '',
        loadChildren: () => Promise.resolve(VehicleModule),
      }
    ]);

Also, you don't need NgModuleFactoryLoader more. Remove strings:

    loader = TestBed.get(NgModuleFactoryLoader);
    loader.stubbedModules = {
      'VehicleModule': VehicleModule,
      'DriverModule': DriverModule
    };

If you need guards (for example, you need to check if canActivate works as expected), you should keep original config, but all lazy loaded modules you need too:

    router.resetConfig([
      ...router.config,
      {
        path: 'vehicle',
        loadChildren: () => Promise.resolve(VehicleModule),
      },
      {
        path: 'driver',
        loadChildren: () => Promise.resolve(DriverModule),
      },
      {
        path: '',
        loadChildren: () => Promise.resolve(VehicleModule),
      }
    ]);

Collectives™ on Stack Overflow

Writing unit test cases for lazy loaded module angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related