使用 mat-select 和 formControlName 测试 Angular 组件的业力错误

编程问答 2022-05-27

问题描述

我的问题是：以下代码在浏览器中有效，但如果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
  ],
angularangularangular-material2karma-runnertesting