如何解决使用 mat-select 和 formControlName 测试 Angular 组件的业力错误
我的问题是:以下代码在浏览器中有效,但如果karma-testing它不能 .
谁能帮帮我?谢谢!
我的堆栈中有以下内容:
- Angular 8.2.7
- 材料 8.2.3
- 茉莉花 3.5.0
- 业力 4.4.1
模板:
<mat-form [formGroup]="formGroup">
<mat-form-field>
<mat-select formControlName="myField" placeholder="Placeholder">
<mat-option value=""></mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
</mat-select>
</mat-form-field>
</mat-form>
整个项目:https://stackblitz.com/edit/angular-mat-select-karmatest
运行 npm run test
时得到的错误消息:
$ npm run test
> my-ui@0.0.0 test C:\git\test
> ng test --source-map=false --watch=false --karma-config=karma-jenkins.conf.js --code-coverage
HeadlessChrome 87.0.4280 (Windows 10.0.0) test MyComponent should create Failed
Error: No value accessor for form control with name: 'mySelect'
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function,nodeFlags: 914016259,rootNodeFlags: 1,nodeMatchedQueries: 0,flags: 0,nodes: [ Object({ nodeIndex: 0,parent: null,renderParent: null,bindingIndex: 0,outputIndex: 0,checkIndex: 0,flags: 1,childFlags: 2,directChildFlags: 2,childMatchedQueries: 0,matchedQueries: Object({ }),matchedQueryIds: 0,references: Object({ }),ngContentIndex: null,childCount: 1,bindings: [ ],bindingFlags: 0,outputs: [ ],element: Object({ ns: '',name: 'h1',attrs: [ ],template: null,componentProvider: null,componentView: null,componentRendererType: null,publicProviders:
null({ }),allProviders: null({ }),handleEvent: Function }),provider: null,text: null,query: null,ngContent: null }),Object({ nodeIndex: 1,parent: Object({ nodeIndex: 0,...
at _throwError (http://localhost:9876/_karma_webpack_/vendor.js:112511:11)
at setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:112337:9)
at FormGroupDirective.addControl (http://localhost:9876/_karma_webpack_/vendor.js:116117:9)
at FormControlName._setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:116771:66)
at FormControlName.ngOnChanges (http://localhost:9876/_karma_webpack_/vendor.js:116694:18)
at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/vendor.js:92716:19)
at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/vendor.js:104054:20)
at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.js:103993:16)
at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.js:105015:62)
at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/vendor.js:104958:13)
HeadlessChrome 87.0.4280 (Windows 10.0.0): Executed 1 of 1 (1 Failed) (0 secs / 0.288 secs)
HeadlessChrome 87.0.4280 (Windows 10.0.0) test MyComponent should create Failed
Error: No value accessor for form control with name: 'mySelect'
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function,...
at _throwError (http://localhost:9876/_karma_webpack_/vendor.js:112511:11)
at setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:112337:9)
at FormGroupDirective.addControl (http://localhost:9876/_karma_webpack_/vendor.js:116117:9)
at FormControlName._setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:116771:66)
at FormControlName.ngOnChanges (http://localhost:9876/_karma_webpack_/vendor.js:116694:18)
at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/vendor.js:92716:19)
at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/vendor.js:104054:20)
at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.js:103993:16)
at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.js:105015:62)
HeadlessChrome 87.0.4280 (Windows 10.0.0): Executed 1 of 1 (1 Failed) ERROR (0.308 secs / 0.288 secs)
=============================== Coverage summary ===============================
Statements : 100% ( 12/12 )
Branches : 100% ( 0/0 )
Functions : 66.67% ( 2/3 )
Lines : 100% ( 11/11 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-ui@0.0.0 test: `ng test --source-map=false --watch=false --karma-config=karma-jenkins.conf.js --code-coverage`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-ui@0.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\myuser\AppData\Roaming\npm-cache\_logs\2021-02-04T07_26_15_391Z-debug.log
解决方法
模板中使用了mat-option,但规范文件中没有。
<mat-select formControlName="mySelect" placeholder="Placeholder">
<mat-option value=""></mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
</mat-select>
my.component.spec.ts
导入并添加到测试平台配置中,它丢失了
TestBed.configureTestingModule({
declarations: [TestHostComponent,MyComponent],imports: [
BrowserAnimationsModule,FormsModule,ReactiveFormsModule,CommonModule,MatTableModule,MatButtonModule,MatCheckboxModule,MatStepperModule,MatFormFieldModule,MatSelectModule,MatInputModule,MatIconModule,MatDatepickerModule,MatNativeDateModule,MatExpansionModule,MatDividerModule,MatGridListModule,MatDialogModule,MatRadioModule,MatProgressSpinnerModule,MatOptionModule // this on was missing
],
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。