如何导入共享模块（使用 Angular Material）来测试 Angular 应用程序？答案

【问题标题】：How do I import a shared module (with Angular Material) to test Angular applications?如何导入共享模块（使用 Angular Material）来测试 Angular 应用程序？
【发布时间】：2019-09-04 09:31:31
【问题描述】：

我正在尝试为同样使用 Angular Material 和 Angular Flex 布局的 Angular 示例应用程序创建测试。

在我的应用程序中，我已经在使用共享模块来导入所有 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();
  });
});

令我惊讶的是，测试现在通过了。我真的不知道为什么。

在测试时我是否可以像在常规应用程序中一样导入共享模块？

【问题讨论】：

能否请您附上您在第一种情况下收到的错误消息？
@yurzui 你用这么简单的问题帮我找到了答案。谢谢你。下面回答。我觉得很尴尬。

标签： angular angular-material angular-test

【解决方案1】：

我必须感谢@yurzui。他请求了我在测试中收到的错误消息。

事实证明，我并没有真正注意该消息，并且在复制到此处发布时注意到了。错误消息确实提到了一个未知标签，我知道它来自 Angular Material。但是，就在它下面提到了另一个组件中的问题。

这里的问题是AccountComponent 是一个标签页，其中显示了另外两个在测试模块上没有导入材料模块的组件。我觉得很尴尬。

【讨论】：