Angular Unit Testing with Spectator - Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation

Question

I want to use spectator to assist me with my unit tests as I have read great things about it. However I'm not sure about how to resolve a problem with my tests. In my component template I have a formGroup like so...

<form [formGroup]="emailReportForm" (ngSubmit)="emailReport()">
<!-- Lots more HTML  here -->
</form>

and in my TS file I have the following in my ngOnInit / constructor...

constructor(@Inject(MAT_DIALOG_DATA) data: any,
              private formBuilder: FormBuilder,
              private apiService: ApiService,
              public dialogRef: MatDialogRef<EmailReportComponent>) {
    this.data = data;
  }

 ngOnInit(): void {
      this.emailReportForm = this.formBuilder.group({
        emailAddress: new FormControl(null, [
          Validators.required,
          Validators.pattern('^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$')
        ]),
        updateOn: 'keyup'
      });
  }

So I need to mock my services and imports, so here is my spec.ts file... I have reduced some of the code for readability:

import { createComponentFactory, Spectator } from '#ng/node_modules/@ngneat/spectator/jest';
import { ApiService } from '#ng/src/app/common/services/api/api.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '#ng/node_modules/@angular/material';
import { FormBuilder, FormControl, FormGroup, Validators,} from '#ng/node_modules/@angular/forms';

describe('EmailReportComponent', () => {
  let spectator: Spectator<EmailReportComponent>;
  const mockData = { };
  const dialogMock = { close: () => { } };

  const createComponent = createComponentFactory({
    component: EmailReportComponent,
    imports: [
      FormBuilder,
      FormControl,
      FormGroup,
      Validators,
    ],
    componentProviders: [
      { provide: ApiService, useValue: { emailReport: jest.fn() } },
      { provide: MAT_DIALOG_DATA, useValue: mockData },
      { provide: MatDialogRef, useValue: dialogMock },
    ],
  });

  beforeEach(() => spectator = createComponent());
  describe('Methods', () => {
    // tests go here
  });

When I run my tests I get the following error:

Error: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

Now I could use CUSTOM_ELEMENTS_SCHEMA to prevent the error, but this seems wrong. Can anyone please advise me how to resolve my issue.

I don't think FormBuilder, FormControl, FormGroup, Validators are modules. Why don't you import [ReactiveFormsModule, FormsModule] instead? — Alexus, Nov 27 '19 at 13:41

score 4 · Answer 1 · answered Feb 22 '20 at 19:42

You should put ReactiveFormsModule into imports, like below:

const createComponent = createComponentFactory({
    component: TestComponent,
    imports: [ReactiveFormsModule]
  });

I think, that you do not need this imports: FormBuilder, FormControl, FormGroup, Validators, in imports array.

Angular Unit Testing with Spectator - Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation

1 Answers1