使用 Jasmine 和 Karma 进行角度单元测试时出错

Posted 2023-03-25

【中文标题】使用 Jasmine 和 Karma 进行角度单元测试时出错

【英文标题】：Error while angular unit testing with Jasmine and Karma

【发布时间】：2020-05-30 08:58:51

【问题描述】：

我已经在我的 spec.ts 中导入了角度材料，但是在尝试运行该特定组件的 ng 测试时出现以下错误：

错误：模板解析错误：

'mat-form-field' 不是已知元素： 1. 如果 'mat-form-field' 是 Angular 组件，则验证它是否是该模块的一部分。 2. 如果“mat-form-field”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("

[错误->] ][dataSource]="parts" matSort class="mat-elevation-z8"> "): ng:///DynamicTestModule/PartViewComponent.html@6:23 找不到管道“uuidAbbrev”（“eader-cell *matHeaderCellDef mat-sort-header>Uuid [错误 ->]row.uuid|uuidAbbrev "): ng:///DynamicTestModule/PartViewComponent.html@10:44 无法绑定到“matHeaderRowDef”，因为它不是“tr”的已知属性。 (" ]matHeaderRowDef="displayedProps"> [错误->] ]*matRowDef="让行；列：displayedProps；"> "): ng:///DynamicTestModule/PartViewComponent.html@24:35 嵌入式模板上的任何指令均未使用属性绑定 matRowDefColumns。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。 (" [错误->] http://localhost:9876/_karma_webpack_/vendor.js:36418:17) 在 TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.js:54593:19) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60159:37) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60146:23) 在http://localhost:9876/_karma_webpack_/vendor.js:60089:62 在 Set.forEach() 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.js:60089:19) 在http://localhost:9876/_karma_webpack_/vendor.js:60007:19 在 Object.then (http://localhost:9876/_karma_webpack_/vendor.js:36409:77) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.js:60005:26) ```

【问题讨论】：

分享一些代码，你的测试是什么样的？

添加了所有需要的细节：1.我的测试文件（spec.ts）2.要测试的component.ts文件3.执行测试用例时遇到的错误。

我相信您需要将材料组件模块添加到TestBed.configureTestingModule()中的导入数组中

测试用例还在继续。您能帮我为上述编写的 .ts 文件提供一个有效的测试用例吗？

【参考方案1】：

有几点：

为避免直接从 Angular Material 导入模块，您需要创建一个单独的 Angular 模块。这是一个很好的做法，你应该坚持下去:)

第二， 您需要导入刚刚在 TestBed 中创建的 Angular Material 模块：

  beforeEach(async(() => 
            TestBed.configureTestingModule(
              imports: [MaterialModule],
              declarations: [PartViewComponent],
              providers: [PartService]
            )
            .compileComponents();
          ));

我的 MaterialModule 示例：

import  NgModule  from '@angular/core';
import 
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
 from '@angular/material';

@NgModule(
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatInputModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatCheckboxModule,
    MatMenuModule,
    MatChipsModule,
    MatExpansionModule
  ],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatMenuModule,
    MatCheckboxModule,
    MatChipsModule,
    MatExpansionModule
  ],
  declarations: []
)
export class MaterialModule 

最后但同样重要的是，您可能会收到另一个与管道 uuidAbbrev 相关的错误，请确保将其添加到您的 declarations 数组中的 TestBed.configureTestingModule

【讨论】：

您能解释一下为什么这是一个好的做法吗？似乎不清楚，为什么我们在 PartViewComponent 中可能只需要 1 时要包含所有模块。有依赖关系吗？在生产中（不是测试），这不会破坏生成的代码吗？我不知道，“进口”是如何真正起作用的。

啊，在过去，建议这样做以避免一遍又一遍地导入相同的模块。例如，在所有模块中导入 MatButtonModule、MatCardModule 等。但是，我可以看到这里的这个人indepth.dev/posts/1191/stop-using-shared-material-module 建议停止这样做。理想情况下，tree-shaking 应该能够从共享的 MaterialModule 中去除所有未使用的导入。我需要尝试一下并进行比较。

感谢您的即时回复和链接！