Angular Test Jest - TypeError：无法读取未定义的属性“queryParams”答案

【问题标题】：Angular Test Jest - TypeError: Cannot read property 'queryParams' of undefinedAngular Test Jest - TypeError：无法读取未定义的属性“queryParams”
【发布时间】：2021-03-28 08:52:21
【问题描述】：

我在其他帖子中看到了同样的错误，但它们对我不起作用。

我有一个 Angular 组件，我需要从 url 中读取一个 queryParam，例如在http://localhost:4200/sample-page?page=3 我想将数字 3 存储到组件局部变量中。

/**
 * Set page by url parameter
 */
export const setPaginationMarkByUrlParam = (activatedRoute): number => {
  // Get page param from Url to set pagination page
  const pageParam = activatedRoute.snapshot.queryParams;
  return pageParam.page ? Number(pageParam.page) : 1;
};

这个函数在另一个文件中，我把activeRoute作为参数，它来自我想要获取queryParam的组件的ngOnInit。

ngOnInit() {
    this.page = setPaginationMarkByUrlParam(this.activatedRoute);
}

此代码运行良好，但是当 Jenkins 管道运行 npx jest 测试时，我收到以下消息： TypeError: Cannot read property 'queryParams' of undefined

我的规格：

beforeEach(() => {
      TestBed.configureTestingModule({
        ...,
        providers: [
          {
            provide: ActivatedRoute,
            useValue: {
              data: {
                subscribe: (fn: (value: Data) => void) =>
                  fn({
                    pagingParams: {
                      predicate: 'id',
                      reverse: false,
                      page: 0
                    }
                  })
              }
            }
          }
        ]...

it('Should call load all on init', () => {
      // GIVEN
      const headers = new HttpHeaders().append('link', 'link;link');
      spyOn(service, 'query').and.returnValue(
        of(
          new HttpResponse({
            body: [new DataSource(123)],
            headers
          })
        )
      );

      // WHEN
      comp.ngOnInit();

      // THEN
      expect(service.query).toHaveBeenCalled();
      expect(comp.dataSources[0]).toEqual(jasmine.objectContaining({ id: 123 }));
    });

comp.ngOnInit(); 函数测试失败。

我没有任何类型的私有变量，作为参数的activeRoute，我尝试了public和private。

查看 StackOverflow 和 GitHub 问题，我无法解决此问题。

非常感谢！

【问题讨论】：

你在模拟激活的路由吗？您的 testBed 配置是什么样的？
@RandyCasburn 我已经用 spect 文件更新了帖子
请考虑：What should I do when someone answers my question?

标签： javascript angular testing jestjs angular-activatedroute

【解决方案1】：

当您在模拟 data 时，您并没有在 ActivatedRoute 上模拟 snapshot。您有三个选择来完成此操作：

首先，您应该考虑使用 ActivatedRouteStub 作为described in the docs。然后，这就像：activatedRoute.setParamMap({page: 3}); 设置您想要设置的任何查询参数一样简单。此选项需要更多测试代码
下一个选项：这将使用 Observable 在 ActivatedRoute 上模拟 page 的 queryParameter：

  provide: ActivatedRoute, useValue: {
    snapshot: of(queryParams: { page: 3 }),
  }

如果由于您的问题中未披露的原因，您不需要 ActivatedRoute 中的 Observable，这将是备用代码：

  provide: ActivatedRoute, useValue: {
    snapshot: { queryParams: { page: 3 } }
  }

最后，您提供的代码没有为 ActivatedRoute 提供程序调用inject，也没有显示测试组件的创建。所以至少要确保你也这样做：

要么：

fixture = TestBed.createComponent(...);

或者：

activatedRoute = TestBed.inject(ActivatedRoute);

如果这些建议都不能解决您的问题，请放置一个最小的 StackBlitz 来演示该问题，我们将使其正常工作。

【讨论】：