离子单元测试 - 找不到管道“日期”答案

【问题标题】：ionic unit testing - the pipe 'date' could not be found离子单元测试 - 找不到管道“日期”
【发布时间】：2020-12-05 21:56:54
【问题描述】：

我有一个在模板中使用管道日期的组件。它适用于模拟器和浏览器。

执行单元测试时 - 我得到一个

错误：找不到管道“日期”！

对于该组件中的所有测试用例。使用最新的 ionic、angular、jasmine、karma 等。

app.module.ts

import { CommonModule, DatePipe } from '@angular/common';

@NgModule({
declarations: [AppComponent, DatePipe], 
imports: [ Common Module ],
providers: [CommonModule],
exports: [CommonModule]

...

users.page.spec.ts

import { CommonModule, DatePipe } from '@angular/common';
describe('UsersPage', () => {
  let component: UsersPage;
  let fixture: ComponentFixture<UsersPage>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ CommonModule],
      declarations:[DatePipe],
      schemas: [ NO_ERRORS_SCHEMA ],
      providers: [
        { provide: UserInfoService, useClass: MockUserInfoService },
        { provide: TaskHistoryService, useClass: MockTaskHistoryService },
        { provide: CommonModule, useClass: CommonModule}
      ],
    }).compileComponents();
    

    fixture = TestBed.createComponent(UsersPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

错误：

Error: The pipe 'date' could not be found!
    at getPipeDef$1 (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24393:1)
    at ɵɵpipe (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24356:1)
    at UsersPage_Template (ng:///UsersPage.js:115:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7329:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7138:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8382:1)
    at renderChildComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:6997:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7163:1)
    at ComponentFactory$1.create (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22291:1)
    at initComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1983:1)

我也有 CommonModule 在使用日期管道的组件的@Component 的提供者中。感觉就像我错过了一些简单的东西。我已经阅读了类似的问题（针对自定义管道）并尝试应用相同的修复程序 - 到目前为止没有任何效果。提前致谢。

最后，一些版本号：

Angular CLI: 10.0.3
Node: 14.5.0
OS: darwin x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: <error>

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.3
@angular-devkit/build-angular     0.1000.3
@angular-devkit/build-optimizer   0.1000.3
@angular-devkit/build-webpack     0.1000.3
@angular-devkit/core              10.0.3
@angular-devkit/schematics        10.0.3
@angular/cli                      10.0.3
@ngtools/webpack                  10.0.3
@schematics/angular               9.1.7
@schematics/update                0.1000.3
rxjs                              6.6.0
typescript                        3.9.7
webpack                           4.43.0

【问题讨论】：

标签： angular unit-testing ionic-framework

【解决方案1】：

没关系。有没有其他人倾向于简单地提出问题就可以回答问题？如果您从未来阅读本文，遇到类似问题，请继续阅读：当我声明正在测试的模块时，我的问题自行解决了：

TestBed.configureTestingModule({
 imports: [CommonModule],
 providers: [
        { provide: UserInfoService, useClass: MockUserInfoService },
        { provide: TaskHistoryService, useClass: MockTaskHistoryService },
      ],
 declarations:[UsersPage]
    }).compileComponents();

现在，在那之后出现了很多错误，但这些都很容易解决（主要是处理我的 MOC 返回 null 的事实，我的规范说不应该被允许。叹息。

终于感觉一切都开始了。不过，不能保证我的想法是正确的。

【讨论】：

【解决方案2】：

管道名称区分大小写，日期管道全部小写。

可能需要导出所有基本 Angular 指令和管道的 CommonModule，例如 NgIf、NgForOf、DecimalPipe 等。由 BrowserModule 重新导出，当您使用 CLI new 命令创建新应用时，它会自动包含在根 AppModule 中。

【讨论】：