Is there a way to configure component.spec.ts automatically?

Question

I am adding unit tests in my Angular 7 app. I have 100 components to test, at least, and each one are failing because of the configuration: they need the declaration of each dependencies needed.

This is my component.spec.ts where is the configuration when I execute ng test:

    import { async, ComponentFixture, TestBed } from 
    '@angular/core/testing';

    import { myComponent } from './mycomponent';
    import { FontAwesomeModule } from '@fortawesome/angular- 
    fontawesome';

    describe('myComponent', () => {
      let component: myComponent;
      let fixture: ComponentFixture<myComponent>;

      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ myComponent ],
          imports: [
            FontAwesomeModule
            // + Others imports
          ]
        })
        .compileComponents();
      }));

      beforeEach(() => {
        fixture = TestBed.createComponent(myComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });
    });

In some components, I add providers. In some cases, I use a mockService. Everything I did, comes from angular docs.

Is there a way to configure easily or automatically unit tests (or end to end tests) with Angular, instead of to add every module needed manually?

I am using Angular 7, jasmine (3.3.1) and karma (4.0.0).

Answer 1

I usually import all dependencies individually as I make sure that the test only loads the dependencies that it actually needs. However, I have found a way to easily make all dependencies available to your test script without having to individually import each dependency. Instead of importing all dependencies individually, Import the module that is declaring your component to be tested. By importing the module on your unit test, you'll make all dependencies, including services and the component itself, available to your tests.

I usually take the trouble of declaring dependencies to avoid overloading the test with code it wont use which, in theory, will generally make run tests run slower. It sounds like this may be ok for your use case since you have so many tests to write.

Other than a loss in speed I know of no other drawbacks but there may be. If anyone knows of any please add them as comments to this post.

P.S. There may be dependencies that are being imported by your AppModule. These may need to be imported individually along with the component's declaring module.

Test Script

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EasyImportComponent } from './easy-import.component';
import { EasyImportModule } from './easy-import.module';

describe('EasyImportComponent', () => {
  let component: EasyImportComponent;
  let fixture: ComponentFixture<EasyImportComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ EasyImportModule ]
        //, declarations: [ EasyImportComponent ] <-- No longer needed since module declares this already
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EasyImportComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 2

I've made some researches with what is the best way for testing with Angular and I found an answer here, with several solutions and great explanations!