angular - 错误 : mat-form-field must contain a MatFormFieldControl

Question

我目前正在深入研究我在 Jasmine/Karma 测试中收到的一些警告，以及当我尝试添加 MatFormFieldModule 和 MatInputModule 时，如下所示:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { UserApiService } from 'src/app/services/api/user-apiservice';
import { InitService } from 'src/app/services/tops/initializer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'

import { AddUserComponent } from './adduser.component';

describe('AddUserComponent', () => {
  let component: AddUserComponent;
  let fixture: ComponentFixture<AddUserComponent>;
  let mockMatDialogRef, mockTlsApiService, mockInitService, mockMatDialog, mockMatSnackBar, mockMAT_DIALOG_DATA;

  beforeEach(async(() => {
    mockInitService = jasmine.createSpyObj(['Roles']);

    TestBed.configureTestingModule({
      declarations: [ AddUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: UserApiService, useValue: mockTlsApiService},
        {provide: InitService, useValue: mockInitService},
        {provide: MatDialog, useValue: mockMatDialog},
        {provide: MatSnackBar, useValue: mockMatSnackBar}
      ],
      imports: [
        MatFormFieldModule, MatInputModule
      ]
    })
    .compileComponents();
  }));

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

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

我的测试用例在这个 html 的帖子标题中给了我错误消息，我知道这一点，因为当我评论这个块时，错误消失了。

<mat-form-field appearance="fill">
  <mat-label>Search for Either: First Name and/or Last Name, or ID</mat-label>
  <input matInput (keyup)="search($event.target.value)" placeholder="Search for Either: First Name and/or Last Name, or ID">
</mat-form-field>

根据我在 stackoverflow 上找到的帖子，我将输入标签更改为此

<input matInput (keyup)="search($event.target.value)" placeholder="Search for Either: First Name and/or Last Name, or ID" />

但即使这样做了，我仍然是同样的错误。还有什么我想念的吗？

Answer 1

它可能与您在应用程序中使用的另一个 Angular Material 组件有关。导入 MatSelectModule 为我工作。

import { MatSelectModule } from '@angular/material/select';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ YourComponent ],
    imports: [ 
      ...,
      MatSelectModule 
    ]
  })
  .compileComponents();
});