Angular 測試笑話 - 類型錯誤：無法讀取未定義的屬性“queryParams”

Question

我在其他帖子中看到了同樣的錯誤，但它們對我不起作用。

我有一個 Angular 組件，我需要從 url 中讀取一個 queryParam，例如在http://localhost:4200/sample-page?page=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;
};

這個 function 在另一個文件中，我將 activeRoute 作為參數，它來自我想要獲取 queryParam 的組件的 ngOnInit。

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

此代碼運行良好，但是當 Jenkins 管道運行 npx 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(); function。

我沒有任何類型的私有變量，作為參數的activeRoute，我嘗試了公共和私有。

查看 StackOverflow 和 GitHub 問題我無法解決此問題。

非常感謝！

Answer 1

雖然您是 mocking data ，但您不是 ActivatedRoute 上的 mocking snapshot 。 您有三個選擇來完成此操作：

1. 首先，您應該考慮使用文檔中描述的 ActivatedRouteStub。 這樣就很容易了： activatedRoute.setParamMap({page: 3}); 設置您要設置的任何查詢參數。 此選項需要更多測試代碼

2. 下一個選項：這將使用 Observable 模擬 ActivatedRoute 上page的 queryParameter：

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

3. 如果由於您的問題中未披露的原因，您不需要來自 ActivatedRoute 的 Observable，這將是備用代碼：

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

最后，您提供的代碼沒有為 ActivatedRoute 提供程序inject調用，也沒有顯示測試組件的創建。 所以至少要確保你也這樣做：

任何一個：

fixture = TestBed.createComponent(...);

或者：

activatedRoute = TestBed.inject(ActivatedRoute);

如果這些建議都不能解決您的問題，請放置一個最小的 StackBlitz 來演示問題，我們會讓它工作。

Answer 2

通常，當您使用 Jest 使用ActivatedRoute時配置/模擬不同RouteOptions ，您應該使用：

1. 來自@ngneat/spectator/jest的createRoutingFactory
2. 並直接在其構造函數上傳遞一個或多個RouteOptions屬性，例如（params、queryParams、parent 等）

例如：

const createComponent = createRoutingFactory({
component: Component,
imports: [RouterTestingModule],
parent: {
  snapshot: {
    queryParamMap: convertToParamMap({
      //...
    }),
    paramMap: convertToParamMap({
     //...
    })
  } 
 }
});