Node.js 角度8-加载垫模块的单元测试问题

我正在尝试为登录组件编写Angular的单元测试。 在组件中，我使用了mat表单字段、mat标签、mat图标和mat错误。 它们工作得很好。但当我运行ng测试时——代码覆盖率

所有模块都导入/导出到名为“材质模块”的模块中。然后我将模块导入登录模块。
这是我的login.component.html

<div class="text-center">
  <h1>S'identifier</h1>
</div>
<form class="" [formGroup]="userForm" (ngSubmit)="submit(userForm)">
  <div class="card-body p-6 mb-3">
    <div class="form-group">
      <mat-form-field appearance="outline" class="login-id-form-field">
        <mat-label>Identifiant</mat-label>
        <input
          matInput
          id="email"
          type="email"
          class="login-id"
          [formControl]="userForm.controls['email']"
          [errorStateMatcher]="matcher"
        />
        <mat-icon
          matSuffix
          class="red-icon error-icon"
          *ngIf="
            matcher.isErrorState(userForm.controls['email']) &&
            userForm.controls['email'].errors
          "
          >error</mat-icon
        >
        <mat-icon
          matSuffix
          class="green-icon error-icon"
          *ngIf="!userForm.controls['email'].errors"
        >
          check_circle
        </mat-icon>
        <mat-error *ngIf="userForm.controls['email'].errors">
          Identifiant invalide
        </mat-error>
      </mat-form-field>
    </div>
    <div class="form-group">
      <mat-form-field
        appearance="outline"
        class="login-id-form-field password-form-field"
      >
        <mat-label>Mot de passe</mat-label>
        <input
          matInput
          id="password"
          type="password"
          class="login-id"
          [formControl]="userForm.controls['password']"
          [errorStateMatcher]="matcher"
        />
        <mat-icon
          matSuffix
          class="red-icon error-icon"
          *ngIf="
            matcher.isErrorState(userForm.controls['password']) &&
            userForm.controls['password'].errors
          "
        >
          error
        </mat-icon>
        <mat-icon
          matSuffix
          class="green-icon error-icon"
          *ngIf="!userForm.controls['password'].errors"
        >
          check_circle
        </mat-icon>

        <mat-error *ngIf="userForm.controls['password'].errors">
          Mot de passe invalide ( {{ passwordStrength.label }} )
        </mat-error>
      </mat-form-field>
      <div class="d-flex mt-2" style="height: 24px">
        <mat-error *ngIf="auth.loginError.length && userForm.valid">
          E-mail ou mot de passe incorrect
        </mat-error>
        <div class="ml-auto text-right">
          <a [routerLink]="'reset-password'">Mot de passe oublié ?</a>
        </div>
      </div>
    </div>
    <div class="form-footer mt-5">
      <button
        type="submit"
        class="btn d-block mx-auto primary-strada-btn strada-btn-large"
        [disabled]="!userForm.valid || auth.loggingIn"
      >
        Connexion
      </button>
    </div>
  </div>
</form>

S’标识符
鉴定人
错误
检查圆
伤残鉴定人
路况
错误
检查圆
无效通行证（{{passwordStrength.label}}）
您发送的电子邮件不正确

您的全局Angular CLI版本（10.0.5）高于本地版本
版本（8.0.6）。使用本地CLI版本。
要禁用此警告，请使用“ng config-g cli.warnings.versionMismatch false”。
14 09 2020 15:01:47.510:INFO[框架：karma parallel]：跨4个浏览器切分规范
10%构建2/2模块0活动14 09 2020 15:01:53.934:INFO[karma服务器]：karma v4.1.0服务器在启动http://0.0.0.0:9876/
14 09 2020 15:01:53.936:INFO[launcher]：启动浏览器ChromeHeadless、ChromeHeadless、ChromeHeadless、ChromeHeadless，无并发限制
14 09 2020 15:01:53.943:信息[启动器]：启动浏览器ChromeHeadless
14 09 2020 15:01:53.950:信息[启动器]：启动浏览器ChromeHeadless
14 09 2020 15:01:53.954:信息[启动器]：启动浏览器ChromeHeadless
14 09 2020 15:01:53.964:信息[启动器]：启动浏览器ChromeHeadless
14 09 2020 15:02:10.647:信息[HeadlessChrome 85.0.4183（Windows 10.0.0）]：连接在id为52943636的插座ASC5nD0AuFD0GspSAAAA上
14 09 2020 15:02:10.652:信息[HeadlessChrome 85.0.4183（Windows 10.0.0）]：连接在id为27694527的QA4STEUC5v4EV55_AAAB插座上
14 09 2020 15:02:10.655:信息[HeadlessChrome 85.0.4183（Windows 10.0.0）]：连接到id为63183944的插座060bO_di1o_9LMMSAAC上
14 09 2020 15:02:10.658:信息[HeadlessChrome 85.0.4183（Windows 10.0.0）]：连接到id为2553141的插座iAPjmFOsygupfAcZAAAD上
无头Chrome 85.0.4183（Windows 10.0.0）：1次成功执行0次（0秒/0秒）
警告：“规范”[karma parallel]添加单个测试以防止失败应该通过成功测试来防止此碎片上的失败“没有预期”
无头Chrome 85.0.4183（Windows 10.0.0）：1次成功执行0次（0秒/0秒）
警告：“规范”[karma parallel]添加单个测试以防止失败应通过成功Headlesschrome 85.0.4183（Windows 10.0.0）：执行1次成功中的1次（0.032秒/0.004秒）来防止此碎片失败
无头Chrome 85.0.4183（Windows 10.0.0）：成功执行1次（0.032秒/0.004秒）
无头Chrome 85.0.4183（Windows 10.0.0）：成功执行1次（0.032秒/0.004秒）
HeadlessChrome 85.0.4183（Windows 10.0.0）警告：“规范”[karma parallel]添加单一测试以防止失败应通过成功测试防止此碎片失败“没有预期”
无头Chrome 85.0.4183（Windows 10.0.0）：成功执行1次（0.032秒/0.004秒）
无头Chrome 85.0.4183（Windows 10.0.0）：1次成功执行0次（0秒/0秒）
HeadlessChrome 85.0.4183（Windows 10.0.0）组件：空时登录表单无效失败
1.如果“垫子标签”是一个角度组件，则验证它是否是该模块的一部分。
2.如果“mat label”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“class=”表格组“>
[错误->]标识
][errorStateMatcher]=“匹配器”
/>
[错误->]标识
][errorStateMatcher]=“匹配器”
/>
我只需要把AngularMaterialModule导入

    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule, 
        FormsModule,
        AngularMaterialModule],  <-------------------------------------------
      declarations: [LoginPageComponent],
    });```

//通过声明测试组件来优化测试模块
TestBed.configureTestingModule({
进口：[
反应形式模块，
FormsModule，
AngularMaterialModule]，如果您不打算测试通常我们不做的html，您可以添加
TestBed.configureTestingModule（…）.overrideTemplate（LoginPageComponent“”）；
Your global Angular CLI version (10.0.5) is greater than your local
version (8.0.6). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
14 09 2020 15:01:47.510:INFO [framework:karma-parallel]: sharding specs across 4 browsers
 10% building 2/2 modules 0 active14 09 2020 15:01:53.934:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
14 09 2020 15:01:53.936:INFO [launcher]: Launching browsers ChromeHeadless, ChromeHeadless, ChromeHeadless, ChromeHeadless with concurrency unlimited
14 09 2020 15:01:53.943:INFO [launcher]: Starting browser ChromeHeadless
14 09 2020 15:01:53.950:INFO [launcher]: Starting browser ChromeHeadless
14 09 2020 15:01:53.954:INFO [launcher]: Starting browser ChromeHeadless
14 09 2020 15:01:53.964:INFO [launcher]: Starting browser ChromeHeadless
14 09 2020 15:02:10.647:INFO [HeadlessChrome 85.0.4183 (Windows 10.0.0)]: Connected on socket ASC5nD0AuFD0GspSAAAA with id 52943636
14 09 2020 15:02:10.652:INFO [HeadlessChrome 85.0.4183 (Windows 10.0.0)]: Connected on socket QA4STEUC5v4EV55_AAAB with id 27694527
14 09 2020 15:02:10.655:INFO [HeadlessChrome 85.0.4183 (Windows 10.0.0)]: Connected on socket 060bO_di1o_9LmmsAAAC with id 63183944
14 09 2020 15:02:10.658:INFO [HeadlessChrome 85.0.4183 (Windows 10.0.0)]: Connected on socket iAPjmFOsygupfAcZAAAD with id 2553141
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
WARN: 'Spec '[karma-parallel] Add single test to prevent failure should prevent on this shard failing by having successful tests' has no expectations.'
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
WARN: 'Spec '[karma-parallel] Add single test to prevent failure should prevent on this shard failing by having successfHeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0) WARN: 'Spec '[karma-parallel] Add single test to prevent failure should prevent on this shard failing by having successful tests' has no expectations.'
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0) Component: Login form invalid when empty FAILED
        1. If 'mat-label' is an Angular component, then verify that it is part of this module.
        2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("class="form-group">
              <mat-form-field appearance="outline" class="login-id-form-field">
                [ERROR ->]<mat-label>Identifiant</mat-label>
                <input
                  matInput
                  class="login-id"
                  [formControl]="userForm.controls['email']"
                  [ERROR ->][errorStateMatcher]="matcher"
                />
                <mat-icon
        1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
        error properties: Object({ ngSyntaxError: true, ngParseErrors: [ 'mat-label' is not a known element:
        "): ng:///DynamicTestModule/LoginPageComponent.html@7:8, Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'. ("
        "): ng:///DynamicTestModule/LoginPageComponent.html@14:10, 'mat-icon' is not a known element:
        2. If 'mat-icon' is a Web  ...
            at <Jasmine>
            at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
            at TemplateParser.parse (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:11169:1)
            at JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25541:1)
            at JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25529:61)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25473:1
            at <Jasmine>
            at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25473:1)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25393:1
            at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
            at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
        TypeError: Cannot read property 'userForm' of undefined
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/login/login-page/login-page.component.spec.ts:26:22)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:358:1)
            at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:124:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1)
            at <Jasmine>
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.255 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 2 of 5 SUCCESS (0 secs / 0.159 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.026 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0) Component: Login form invalid when empty FAILED
        1. If 'mat-label' is an Angular component, then verify that it is part of this module.
        2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("class="form-group">
              <mat-form-field appearance="outline" class="login-id-form-field">
                [ERROR ->]<mat-label>Identifiant</mat-label>
                <input
                  matInput
                  class="login-id"
                  [formControl]="userForm.controls['email']"
                  [ERROR ->][errorStateMatcher]="matcher"
                />
                <mat-icon
        1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
        error properties: Object({ ngSyntaxError: true, ngParseErrors: [ 'mat-label' is not a known element:
        "): ng:///DynamicTestModule/LoginPageComponent.html@7:8, Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'. ("
        "): ng:///DynamicTestModule/LoginPageComponent.html@14:10, 'mat-icon' is not a known element:
        2. If 'mat-icon' is a Web  ...
            at <Jasmine>
            at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
            at TemplateParser.parse (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:11169:1)
            at JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25541:1)
            at JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25529:61)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25473:1
            at <Jasmine>
            at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25473:1)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25393:1
            at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
            at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
        TypeError: Cannot read property 'userForm' of undefined
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/login/login-page/login-page.component.spec.ts:26:22)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:358:1)
            at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:124:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:5HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.032 secs / 0.004 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.307 secs / 0.255 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 5 of 5 SUCCESS (0.3 secs / 0.248 secs)
HeadlessChrome 85.0.4183 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.026 secs / 0.004 secs)

=============================== Coverage summary ===============================
Statements   : 23.48% ( 31/132 )
Branches     : 2.44% ( 1/41 )
Functions    : 10.42% ( 5/48 )
Lines        : 21.14% ( 26/123 )
================================================================================

    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule, 
        FormsModule,
        AngularMaterialModule],  <-------------------------------------------
      declarations: [LoginPageComponent],
    });```