Angular testing: Error: NG0304: 'mat-form-field' is not a known element (used in the 'SignInComponent' component template)

Question

Im trying to do a small app with TDD.

When i run npm test following error occurs: Error: NG0304: 'mat-form-field' is not a known element (used in the 'SignInComponent' component template):

1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.

My Modules: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    provideClientHydration(),
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'sign-in',
    loadChildren: () => import('./pages/sign-in/sign-in.module')
      .then((m) => m.SignInModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

sign-in.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { SignInComponent } from './sign-in.component';
import { MatFormFieldModule } from '@angular/material/form-field';


const routes: Routes = [
  {
    path : '',
    component: SignInComponent
  }
]

@NgModule({
  declarations: [SignInComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    MatInputModule,
    MatButtonModule,
    MatFormFieldModule
  ]
})
export class SignInModule { }

sign-in.component.html

<main>
    <form >
        <mat-form-field >
          <mat-label>Email</mat-label>
          <input matInput type="email" placeholder="user@example.com">
        </mat-form-field>
        <mat-form-field >
            <mat-label>Password</mat-label>
            <input matInput type="password" placeholder="password">
        </mat-form-field>
        <div class="aligned-right">
            <button mat-button>Recover password</button>
        </div>
        <button mat-raised-button>LOGIN</button>
    </form>
</main>

sign-in.component.spec.ts

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

import { SignInComponent } from './sign-in.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SignInComponent]
    })
    .compileComponents();
  

    fixture = TestBed.createComponent(SignInComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

tried moving the declaration array in sign-inModule after imports, tried adding MatFormFieldModule to imports in sign-in Module and in app module. tried adding import in testclass to configureTestingModule(). nothing did the trick... after the last attempt i get the error: Error: NG05105: Unexpected synthetic property @transitionMessages found. Please make sure that:

• Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.
• There is corresponding configuration for the animation named @transitionMessages defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations).

Thank you for any help!

Answer 1

Try adding the imports to the component you are testing. You have to add the imports to the component that is imported, since it relies on these modules, for the component to work.

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

import { SignInComponent } from './sign-in.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SignInComponent],
      imports: [
        CommonModule,
        MatInputModule,
        MatButtonModule,
        MatFormFieldModule
      ],
    })
    .compileComponents();
  

    fixture = TestBed.createComponent(SignInComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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