title: Angular - Material <mat-option> not visible in tests
body: <p>I am working on Angular 9 with Material components. I want to show some values with in mat-select component.</p>
  
  <p>Below is app.component.html</p>
  
  <pre><code>&lt;h2&gt; Angular - Material &lt;/h2&gt;
  
  &lt;mat-form-field&gt;
    &lt;mat-label&gt;Type&lt;/mat-label&gt;
    &lt;mat-select &gt;
      &lt;mat-option value="string"&gt;Small text&lt;/mat-option&gt;
      &lt;mat-option value="number"&gt;Number&lt;/mat-option&gt;
      &lt;mat-option value="date"&gt;Date&lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  
  &lt;hr&gt;
  </code></pre>
  
  <p>My app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'angular-playground';
  }
  </code></pre>
  
  <p>When I run app with <strong>ng serve</strong> then I can see select box with all options.</p>
  
  <p><a href="https://i.stack.imgur.com/Cwara.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cwara.png" alt="&lt;mat-select&gt; showing options"></a></p>
  
  <p>But when I try to test this component with karma <strong>ng test</strong> then I am not getting any options in the select box. I tried inspecting HTML DOM and I am not seeing any option tags with in select and there are no errors in the console.</p>
  
  <p><a href="https://i.stack.imgur.com/e4EX8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4EX8.png" alt="enter image description here"></a></p>
  
  <p>app.component.spec.ts</p>
  
  <pre><code>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', () =&gt; {
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule, MatFormFieldModule, MatSelectModule
        ],
        declarations: [
          AppComponent
        ],
      }).compileComponents();
    }));
  
    it('should create the app', () =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.componentInstance;
      expect(app).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>This is a so basic angular application and I have a simple component with only select box. Not sure why it is not showing options in test.</p>
  
  <p>Below is my app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Please help me on this.</p>