如何導入共享模塊（使用Angular Material）來測試Angular應用程序？

Question

我正在嘗試開始為Angular示例應用程序創建測試，該應用程序也使用Angular Material和Angular Flex布局。

在我的應用程序中，我已經使用共享模塊導入所有Angular Material組件。 它是這樣的：

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

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule } from '@angular/material/core';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    MatButtonModule, MatToolbarModule, MatIconModule, MatCardModule,
    MatDatepickerModule, MatFormFieldModule, MatInputModule,
    MatTabsModule, MatNativeDateModule
  ],
  exports: [
    MatButtonModule, MatToolbarModule, MatIconModule, MatCardModule,
    MatDatepickerModule, MatFormFieldModule, MatInputModule,
    MatTabsModule
  ]
})
export class MaterialModule {}

當我第一次運行ng test每個組件都會失敗基本的創建測試。 肯定會有消息提到Angular Material標簽。 所以，我試過這個：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AccountComponent } from './account.component';
import { MaterialModule } from '../material.module';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AccountComponent],
      imports: [
        RouterTestingModule,
        MaterialModule
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

然而，這個測試沒有通過。 但是，我嘗試手動導入模塊，一個接一個地顯示錯誤消息：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AccountComponent } from './account.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AccountComponent],
      imports: [
        RouterTestingModule,
        MatFormFieldModule,
        MatTabsModule,
        MatCardModule
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

令我驚訝的是，測試現在通過。 我真的無法理解為什么。

無論如何我可以在測試時導入共享模塊，就像我在常規應用程序中一樣嗎？

Answer 1

我要感謝@yurzui。 他請求我在測試中收到的錯誤消息。

事實證明，我並沒有真正關注這個消息，我注意到復制到這里發布時。 錯誤消息確實提到了一個未知的標簽，我知道它來自Angular Material。 但是，正好在其下面提到了另一個組件中的問題。

這里的問題是AccountComponent是一個標簽頁，它顯示測試模塊上沒有導入材料模塊的另外兩個組件。 我覺得很尷尬。