执行npm run test出现NG0302错误，未用自定义管道却报错

基于Ionic 7、Angular和Capacitor开发Android应用，执行npm run test进行单元测试时，已在spec.ts中导入SQLite和RouterTestingModule，但仍出现NG0302错误。查阅资料得知该错误通常因未导入或声明自定义管道导致，但仅使用currency和date内置管道，且多个页面使用这些管道仅VerCompraPage报错。

错误信息 #

Error: NG0302: The pipe 'date' could not be found in the 'VerCompraPage' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302
error properties: Object({ code: -302 })
    at getPipeDef (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:22620:15)
    at ɵɵpipe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:22569:19)
    at templateFn (ng:///VerCompraPage.js:61:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:10971:17)
    at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12170:13)
    at renderComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12117:5)
    at renderChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12215:9)
    at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12195:13)
    at ComponentFactory.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13121:13)
    at initComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/testing.mjs:26413:51)

测试代码 #

import { ComponentFixture, TestBed } from'@angular/core/testing';
import { SQLite } from '@awesome-cordova-plugins/sqlite/ngx';


import { VerCompraPage } from './ver-compra.page';
import { RouterTestingModule } from "@angular/router/testing";

describe('VerCompraPage', () => {
  let component: VerCompraPage;
  let fixture: ComponentFixture<VerCompraPage>;

  beforeEach(async() => {
    await TestBed.configureTestingModule({
      providers: [SQLite],
      imports: [RouterTestingModule]
    }).compileComponents();
    fixture = TestBed.createComponent(VerCompraPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Angular的date、currency等内置管道属于CommonModule，常规模块中可能通过共享模块或根模块已导入，但单元测试的测试模块是独立环境，需单独导入CommonModule才能让组件识别这些内置管道。

修改测试代码，在imports数组中添加CommonModule：

import { ComponentFixture, TestBed } from'@angular/core/testing';
import { SQLite } from '@awesome-cordova-plugins/sqlite/ngx';
// 导入CommonModule
import { CommonModule } from '@angular/common';

import { VerCompraPage } from './ver-compra.page';
import { RouterTestingModule } from "@angular/router/testing";

describe('VerCompraPage', () => {
  let component: VerCompraPage;
  let fixture: ComponentFixture<VerCompraPage>;

  beforeEach(async() => {
    await TestBed.configureTestingModule({
      providers: [SQLite],
      imports: [
        RouterTestingModule,
        CommonModule // 添加该模块
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(VerCompraPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

添加后测试模块即可识别内置管道，NG0302错误将被解决。

内容的提问来源于stack exchange，提问作者Abel