TestBed configureTestingModule define imports, declarations, providers, and pipes common to all spec.ts in one Module - pattern

Question

Is there a optimal way to define imports, declarations, providers common to all spec.ts (i.e modules common to all specs one place define like we do it in @NgModule) in one place like we do in @NgModule for application Unit tests.

Note : Call configureTestingModule within a beforeEach so that TestBed can reset itself to a base state before each test runs. as on doc

Here in one of my test spec.ts i have to load same modules components and directives ..etc which is used by some other spec too.

describe('Component: Login', () => {
let loginFixture, loginComponent, loginComponentElement,loginComponentDebugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [FormsModule, ReactiveFormsModule, MaterialRootModule, ModalModule, DatepickerModule,
    DropdownModule, AccordionModule], //--> here we load n number of mudoles 
  declarations: [LoginComponent, LoginHeaderComponent, LoginColumnComponent, LoginColumnContentComponent,
    LoginStatusLaneComponent, LoginSettingsComponent,
    LoginLaneComponent, SortableDirective, WindowHeightDirective, ConfirmDirective, ConfirmPopoverComponent, ConfirmationDialogComponent,
    ConfirmationDialogDirective],         //--> here we load n number of components directive and piper          
  providers: [LoginComponent,
    MockBackend,
    BaseRequestOptions,
    ComponentLoaderFactory,
    ConfirmOptions,
    {
      provide: Http,
      useFactory: (backend, options) => new Http(backend, options),
      deps: [MockBackend, BaseRequestOptions]
    },
    {provide: AuthService, useClass: MockAuthService},
    {provide: AppContextService, useClass: MockAppContextService},
    {provide: NotificationsService, useClass: MockNotificationsService},
    {provide: PositioningService}]       //--> here we load n number of services    
}).compileComponents();
loginFixture = TestBed.createComponent(LoginComponent);
loginComponent = loginFixture.componentInstance; 
loginComponentElement = LoginFixture.nativeElement;
loginComponentDebugElement = LoginFixture.debugElement;
}));

 it('should have a defined component', () => {
expect(LoginComponent).toBeDefined();
});
});

Note : Git Angular issue TestBed.configureTestingModule Performance Issue

Is there any pattern to make it common like loading all this modules components etc in starting before running all spec.ts file and inject respective dependency for each specs . Any help would be great.

I have same thinking. and I've ask on SOja. https://ja.stackoverflow.com/questions/34780/ (no response as of May 22. if I get any info, share it here.) — H.H, May 22 '17 at 11:25

H.H · Answer 1 · 2017-06-13T12:12:26.953

My answer is incomplete you have come to expect. But I hope if it can help you even a little.

router-stubs.ts

//----------Default Import------------
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...snip...
export const test_imports = [
               BrowserModule,
               FormsModule,
               HttpModule,
               BrowserAnimationsModule
             ];

each test.spec.ts

import { test_imports }   from '../testing/router-stubs';
..snip..
      imports: [test_imports],

but providers/declarations can't use in the same way.

score 0 · Answer 2 · answered Mar 29 '18 at 12:26

You need to define TestBed.configureTestingModule before the describe method. so it can be available globally. So now your test cases will look like this.

TestBed.configureTestingModule({
  imports: [FormsModule, ReactiveFormsModule, MaterialRootModule, ModalModule, DatepickerModule,
    DropdownModule, AccordionModule], //--> here we load n number of mudoles 
  declarations: [LoginComponent, LoginHeaderComponent, LoginColumnComponent, LoginColumnContentComponent,
    LoginStatusLaneComponent, LoginSettingsComponent,
    LoginLaneComponent, SortableDirective, WindowHeightDirective, ConfirmDirective, ConfirmPopoverComponent, ConfirmationDialogComponent,
    ConfirmationDialogDirective],         //--> here we load n number of components directive and piper          
  providers: [LoginComponent,
    MockBackend,
    BaseRequestOptions,
    ComponentLoaderFactory,
    ConfirmOptions,
    {
      provide: Http,
      useFactory: (backend, options) => new Http(backend, options),
      deps: [MockBackend, BaseRequestOptions]
    },
    {provide: AuthService, useClass: MockAuthService},
    {provide: AppContextService, useClass: MockAppContextService},
    {provide: NotificationsService, useClass: MockNotificationsService},
    {provide: PositioningService}]       //--> here we load n number of services    
}).compileComponents();

describe('Component: Login', () => {
  let loginFixture, loginComponent, loginComponentElement, loginComponentDebugElement;
  beforeEach(async(() => {

    loginFixture = TestBed.createComponent(LoginComponent);
    loginComponent = loginFixture.componentInstance;
    loginComponentElement = LoginFixture.nativeElement;
    loginComponentDebugElement = LoginFixture.debugElement;
  }));

  it('should have a defined component', () => {
    expect(LoginComponent).toBeDefined();
  });
});

score 0 · Answer 3 · answered Nov 14 '20 at 18:47

There is no need to go for a separate library just to achieve this. You can create a global TestBed just by creating a common angular module where you can define a utility method. This utility method creates the TestBed which you can then reuse across all your spec files.

You can refer to the answer below which also includes sample code: (Possible duplicate) https://stackoverflow.com/a/64835814/4184651

TestBed configureTestingModule define imports, declarations, providers, and pipes common to all spec.ts in one Module - pattern

3 Answers3