Question

当我在Angualr 8项目的角材料组件上运行ng test时遇到多个故障。在这些情况下，我还没有编写任何特定的测试用例。

DeleteBotModalComponent > should create
Failed: Template parse errors:
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("     <mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    [ERROR ->]<mat-label>Bot ID</mat-label>
                    <input matInput placeholder="" formControlName="id"): ng:///DynamicTestModule/DeleteBotModalComponent.html@8:20
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("m class="example-form" [formGroup]="botDeleteForm">
            <div class="row">
                [ERROR ->]<mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    <mat-l"): ng:///DynamicTestModule/DeleteBotModalComponent.html@7:16
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("     <mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    [ERROR ->]<mat-label>Name</mat-label>
                    <input matInput placeholder="" formControlName="name"): ng:///DynamicTestModule/DeleteBotModalComponent.html@12:20
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("id" placeholder="id" name="id" readonly="true">
                </mat-form-field>
                [ERROR ->]<mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    <mat-l"): ng:///DynamicTestModule/

下面是我的delete-bot-modal.component.spec.ts文件：

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

import { DeleteBotModalComponent } from './delete-bot-modal.component';

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

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

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

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

有人可以在这里告诉我这个问题吗？

Answer 1

在Angular组件测试中，如果您的组件具有依赖项，则需要模拟它们或将其导入。对于材料组件，这意味着在配置测试模块时，为被测试组件中使用的任何组件导入模块。例如：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DeleteBotModalComponent ],
      imports: [
        ReactiveFormsModule,
        MatInputModule,
        MatButtonModule, // any necessary modules
      ]
    })
    .compileComponents();
  }));

当然，您还可以创建一个共享模块，该模块可以导入和导出所有这些模块，从而使编写测试变得更快，更容易。

ng测试会在角形材料组件上引发错误

1 个答案: