带有异步管道的角浅单元测试 InvalidPipeArgument答案

【问题标题】：Angular Shallow unit test InvalidPipeArgument with Async pipe带有异步管道的角浅单元测试 InvalidPipeArgument
【发布时间】：2021-08-30 11:46:30
【问题描述】：

我正在尝试使用浅渲染编写一个简单的角度测试。我在 html 模板中使用异步管道来呈现 observable。我不断收到以下错误：

Error: InvalidPipeArgument: '() => this.referenceDataService.getRoutes() 
    .pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])((routes) => { debugger; return routes || []; }))' for pipe 'AsyncPipe'

组件：

routes$: Observable<RouteModel[]>;
   routes$ = () => this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));

测试：

beforeEach(() => {
    routes = [
        { routeId: 1, prefix:'/test1', route:'/test1' }, 
        { routeId: 2, prefix:'/test2', route:'/test2' }
    ]

    dataServiceMock = {
        getRoutes: () => of(routes)
    };

    shallowComponent = new Shallow(RouteComponent, AppModule)
    .provideMock([
        { provide: ReferenceDataService, useValue: dataServiceMock}
    ])
    .dontMock([FormBuilder]);
});

it('should create',  async () => {
    const { instance } = await shallowComponent.render();
    expect(instance).toBeTruthy();
});

谁能帮我解决问题？

谢谢

【问题讨论】：

标签： typescript jasmine angular11

【解决方案1】：

当您执行npm start 时，代码是否有效？

问题是()，async 管道只能绑定到 Observable 而不是返回 Observable 的函数，除非您在 HTML 中调用该函数，否则不推荐这样做，因为它会减慢应用程序，因为每次更改检测运行时都会调用该函数。

试试这个：

// get rid of the () =>
routes$ = this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));

【讨论】：