title: Angular Unit Testing with Spectator - Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation
body: <p>I want to use <a href="https://github.com/ngneat/spectator" rel="nofollow noreferrer">spectator</a> 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 <code>formGroup</code> like so...</p>
  
  <pre><code>&lt;form [formGroup]="emailReportForm" (ngSubmit)="emailReport()"&gt;
  &lt;!-- Lots more HTML  here --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and in my TS file I have the following in my <code>ngOnInit</code> / <code>constructor</code>...</p>
  
  <pre><code>constructor(@Inject(MAT_DIALOG_DATA) data: any,
                private formBuilder: FormBuilder,
                private apiService: ApiService,
                public dialogRef: MatDialogRef&lt;EmailReportComponent&gt;) {
      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'
        });
    }
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>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', () =&gt; {
    let spectator: Spectator&lt;EmailReportComponent&gt;;
    const mockData = { };
    const dialogMock = { close: () =&gt; { } };
  
    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(() =&gt; spectator = createComponent());
    describe('Methods', () =&gt; {
      // tests go here
    });
  </code></pre>
  
  <p>When I run my tests I get the following error: </p>
  
  <blockquote>
    <p>Error: Unexpected value 'FormBuilder' imported by the module
    'DynamicTestModule'. Please add a @NgModule annotation.</p>
  </blockquote>
  
  <p>Now I could use <code>CUSTOM_ELEMENTS_SCHEMA</code> to prevent the error, but this seems wrong. Can anyone please advise me how to resolve my issue.</p>