如何测试包含 <mat-checkbox> 的 ReactiveForm？

Question

我在 ReactiveForm 中设置 <mat-checkbox> 时遇到问题，并且在测试时得到 No value accessor for form control [...]。

当我在开发模式下运行应用程序时，它按预期工作。

使用时：

<mat-checkbox
  id="allDay"
  type="checkbox"
  formControlName="allDay">
    <!-- i18n: @@event.allDay -->All Day Event?<!-- /i18n -->
</mat-checkbox>

运行npm test时出现此错误：

失败：名称为“allDay”的表单控件没有值访问器
错误：没有名称的表单控件的值访问器：'allDay' 在 _throwError /node_modules/@angular/forms/@angular/forms.es5.js:1918:1) 在 setUpControl /node_modules/@angular/forms/@angular/forms.es5.js:1828:1) 在 FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl /node_modules/@angular/forms/@angular/forms.es5.js:4808:1) 在 FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl /node_modules/@angular/forms/@angular/forms.es5.js:5396:1) 在 FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges /node_modules/@angular/forms/@angular/forms.es5.js:5314:1) 在 checkAndUpdateDirectiveInline /node_modules/@angular/core/@angular/core.es5.js:10845:1) 在 checkAndUpdateNodeInline /node_modules/@angular/core/@angular/core.es5.js:12349:1) 在 checkAndUpdateNode /node_modules/@angular/core/@angular/core.es5.js:12288:1) 在 debugCheckAndUpdateNode /node_modules/@angular/core/@angular/core.es5.js:13149:22) 在 debugCheckDirectivesFn /node_modules/@angular/core/@angular/core.es5.js:13090:1)

但该代码适用于其他 <mat-form-field>s 没有任何问题：

<mat-form-field>
  <input
    matInput
    type="text"
    formControlName="name">
</mat-form-field>

在我的组件测试中我必须提供什么吗？

Answer 1

我解决了这个问题。

我忘记在我的规范中添加 Angular Material 依赖项：

import { MatInputModule, MatCheckboxModule, MatRadioModule } from '@angular/material';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

TestBed.configureTestingModule({
  declarations: [
    EventFormComponent
  ],
  imports: [
    TranslateModule.forRoot(),
    ReactiveFormsModule,
    NoopAnimationsModule,
    MatInputModule,
    MatCheckboxModule,
    MatRadioModule
  ],
  providers: [
    FormBuilder
  ]
}).compileComponents();