How do I solve this error when unit testing child component with reactive form as input using Jest and Spectator?

Question

I'm trying to write a basic unit test for an Angular component which is used as a child component and receives a reactive form through an Input() from it's parent. I'm trying to write a unit test using a host component to wrap the component to be tested. I'm using https://netbasal.gitbook.io/spectator/ with Jest to write my tests. I can't get the simplest test working for this component and my guess is the problem has something to do with dependencies. I've been searching google extensively but I can't seem to find anybody else running into this error.

I've tried writing the test without the host component but that also doesn't seem to be working.

describe('ProjectFormComponent', () => {
  let host: SpectatorWithHost<ProjectFormComponent>;

const createHost = createHostComponentFactory<ProjectFormComponent>({
    component: ProjectFormComponent,
    imports: [
      CommonModule,
      ReactiveFormsModule,
      FontAwesomeModule,
      HttpClientTestingModule,
      RouterTestingModule,
      NgxErrorsModule,
      NgSelectModule,
      ToastrModule.forRoot(),
      MaterialImportsModule,
      FormsModule,
      SharedModule
    ],
    providers: [
      { provide: NgxErrorDirective, useValue: {} },
      { provide: APP_BASE_HREF, useValue: '/' },
      { provide: Store, useValue: {} },
      { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
      { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
      { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
    ]
  });

test('ProjectFormComponent is created', inject([FormBuilder], (fb: FormBuilder) => {
    const mockForm = fb.group({
      name: ['', [Validators.required, Validators.maxLength(255)]]
    });

    host = createHost(`<app-project-form></app-project-form>`, false, { parent_form: mockForm });

    expect(host.component).toBeTruthy();

  }));
});

It's a simple test which should result positive. But when I run ng test I get the error: Cannot override module metadata when the test module has already been instantiated. Make sure you are not using inject before overrideModule.

score 0 · Accepted Answer · answered May 27 '19 at 20:40

0

As a way of not repeating the same answers,

https://github.com/NetanelBasal/spectator/issues/57

https://github.com/NetanelBasal/spectator/issues/39

https://github.com/NetanelBasal/spectator

I think you can be benefited by similar issues, see below,

1)Angular2 RC5 how to properly configure test module

2)angular Testbed overrideModule not working

Also a good read https://codecraft.tv/courses/angular/unit-testing/dependency-injection/

Hope this helps

answered May 27 '19 at 20:40

kostas.kapasakis

920
1
11
26

1

After reading the documentation you linked at the bottom: https://codecraft.tv/courses/angular/unit-testing/dependency-injection/ I found the solution. Wrapping the mocked reactive form, createHost function and expect function in `inject([FormBuilder], (fb: FormBuilder) => { });` **inside** the test. – D. Stals May 28 '19 at 07:52

How do I solve this error when unit testing child component with reactive form as input using Jest and Spectator?

1 Answers1