Angular2+测试用例显示NgControl没有提供程序

Question

我正在尝试测试一个具有相当多依赖项的角度组件。但是测试用例期望(组件(.toBeTruthy((;失败，出现错误：没有 NgControl 的提供程序。完整的错误消息如下：

Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED
</div>
[ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options">
<mat-form-field>
<form *ngIf="!loading" class="form" [formGroup]="options">
<mat-form-field>
<mat-form-field>
[ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname">
<mat-form-field>
[ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email">
error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer ("
<input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl ("
[ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl ("
"): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl ("
<mat-e"): ng:///DynamicTestModule/CustomerC ...
Error: Template parse errors:
at <Jasmine>
at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22)
at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48
at <Jasmine>
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1
at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1)
Expected undefined to be truthy.
at <Jasmine>
at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)
Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) (0 secs / 0 secs)
Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED
</div>
[ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options">
<mat-form-field>
<form *ngIf="!loading" class="form" [formGroup]="options">
<mat-form-field>
<mat-form-field>
[ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname">
<mat-form-field>
[ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email">
error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer ("
<input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl ("
[ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl ("
"): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl ("
<mat-e"): ng:///DynamicTestModule/CustomerC ...
Error: Template parse errors:
at <Jasmine>
at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22)
at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48
at <Jasmine>
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1
at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1)
Expected undefined to be truthy.
at <Jasmine>
at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1)
Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) ERROR (0.838 secs / 0 secs)

我已经包含了像FormsModule和RouterTestingModule这样的东西，但它仍然不起作用。

describe('configurator component unit tests', () => {
let configurator: ConfiguratorComponent;
let fixture: ComponentFixture<ConfiguratorComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
ProductsService,
OrdersService,
UdiService,
CustomersService,
TranslateService,
{
provide: ActivatedRoute, useValue: {
params: Observable.of({ id: 'test' })
}
}
],
declarations: [
ConfiguratorComponent,
LoginComponent,
ForgotpasswordComponent,
ResetpasswordComponent,
RegisterComponent,
ContactComponent,
CustomerComponent,
HomeComponent,
PageNotFoundComponent],
imports: [
FormsModule,
CommonModule,
TranslateModule,
MatProgressSpinnerModule,
MatButtonModule,
ElementsModule,
ViewerModule,
OrdersModule,
RouterTestingModule],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents(
).then(() => {
fixture = TestBed.createComponent(ConfiguratorComponent);
configurator = fixture.componentInstance;
});
}));

所以我显然缺少一些模块，但哪一个？我对角度测试台相当陌生。

角度版本：5.2 业力版本：2.0.2 业力茉莉花版本：1.1.1

哦，它可能是那个的重复，但由于在我添加的建议之后这个问题从未得到回答，我认为没关系。 ：S Angular2 测试用例显示 NgControl 没有提供程序

Answer 1

为了帮助巩固答案：最初你错过了ReactiveFormsModule。

要回答第二个问题，您需要在提供程序数组中为测试平台提供TranslateStore

Answer 2

确保在 TestBed 中导入 FormsModule 和/或 ReactiveFormsModule。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
TestBed.configureTestingModule ({
imports: [FormsModule, ReactiveFormsModule]
});

注意：FormsModule 用于模板驱动的表单，ReactiveFormsModule 用于响应式驱动的表单。