Angular - Материал не видно в тестах

Question

Я работаю над Angular 9 с Материальными компонентами. Я хочу показать некоторые значения в компоненте mat-select.

Ниже приведен app.component. html

<h2> Angular - Material </h2>

<mat-form-field>
  <mat-label>Type</mat-label>
  <mat-select >
    <mat-option value="string">Small text</mat-option>
    <mat-option value="number">Number</mat-option>
    <mat-option value="date">Date</mat-option>
  </mat-select>
</mat-form-field>

<hr>

Мой app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-playground';
}

Когда я запускаю приложение с ng serve , я вижу окно выбора со всеми параметрами.

showing options">

Но когда я пытаюсь чтобы протестировать этот компонент с помощью karma ng test , я не получаю никаких опций в окне выбора. Я попытался проверить HTML DOM, и я не вижу никаких тегов параметров с помощью in select, и в консоли нет ошибок.

app. component.spe c .ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { MatFormFieldModule } from '@angular/material/form-field'; 
import {MatSelectModule} from '@angular/material/select'; 

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule, MatFormFieldModule, MatSelectModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Это базовое c angular приложение, и у меня есть простой компонент только с полем выбора. Не уверен, почему он не показывает опции в тесте.

Ниже мой app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field'; 
import {MatSelectModule} from '@angular/material/select'; 


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

Пожалуйста, помогите мне в этом.