Jasmine & Karma : 'mat-chip-list' 在测试时不是已知元素 Angular

Question

当我尝试使用 Jasmine 和 Karma 进行运行测试时出现此错误：

'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("iv class="tag">IAM</div>
    <mat-form-field class="chips" (focusout)="saveFormValue('iam')">
      [ERROR ->]<mat-chip-list #chipListIAM class="field">
        <mat-chip *ngFor="let iam of iams"
               "): ng:///DynamicTestModule/Component.html@33:6

问题是当我运行我的 Angular 代码时，我没有这样的问题一切运行因为我在 AppModule 中声明了我的元素所以我不知道为什么在测试时我有这个错误。

这是我的 HTML 代码：

  <div class="left-side">
    <mat-form-field class="chips" (focusout)="saveFormValue('groups')">
      <mat-chip-list #chipListGroup class="field">
        <mat-chip *ngFor="let group of groups"
                  [selectable]="selectable"
                  [removable]="removable"
                  [color]="primary"
                  selected
                  (removed)="onRemoveGroup(group)">
          {{group.name}}
          <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </mat-form-field>
  </div>

这是我的 AppModule :

@NgModule({
  declarations: [Component, DetailsComponent],
  exports: [
    Component
  ],
  imports: [
    CommonModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatSelectModule,
    FormsModule
  ]
})

这是我的测试文件：

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

import { FormRoutesDetailsComponent } from './details.component';
import { FormsModule } from '@angular/forms';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DetailsComponent ],
      imports: [
        FormsModule
      ]
    })
    .compileComponents();
  }));

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

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

Answer 1

您还必须在 TestingModule 中导入 MatChipsModule（以及要测试的组件使用的所有其他模块）。

TestBed.configureTestingModule({
  declarations: [ DetailsComponent ],
  imports: [
    FormsModule,
    MatChipsModule
  ]
})

Jasmine & Karma : 'mat-chip-list' 在测试时不是已知元素 Angular

Jasmine & Karma : 'mat-chip-list' is not a known element while testing Angular

html

jasmine

karma-runner

angular