使用 mat-select 和 formControlName 测试 Angular 组件的 karma 错误答案

【问题标题】：Error at karma testing an Angular component using mat-select and formControlName使用 mat-select 和 formControlName 测试 Angular 组件的 karma 错误
【发布时间】：2021-02-04 07:29:51
【问题描述】：

我的问题是：以下代码在 浏览器 中有效，但如果 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, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 2, directChildFlags: 2, childMatchedQueries: 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, 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, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 2, directChildFlags: 2, childMatchedQueries: 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)
    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

【问题讨论】：

标签： angular testing karma-runner angular-material2

【解决方案1】：

模板中使用了mat-option，但spec文件中缺少它。

<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
  ],

【讨论】：