Как издеваться над @ViewChild MatTabGroup в шутку?

Question

Я пытаюсь протестировать новый фрагмент кода, который я добавил в свой проект.Это позволяет пользователям выбирать вкладку на странице, и когда они обновляются, страница загружается на той же вкладке.Я использую местное хранилище, чтобы сделать это.

Проблема, с которой я столкнулся, заключается в тестах, где она не может установить selectedIndex из undefined.

В html на вкладке mat у меня есть обработчик событий (selectedTabChange):

<mat-tab-group
  [selectedIndex]="selectedTab.value"
  (selectedIndexChange)="selectedTab.setValue($event)"
  (selectedTabChange)="handleMatTabChange($event)"
>
  <mat-tab label="Tab 1">
    <div *ngIf="selectedTab.value === 0"> ... </div>
  </mat-tab>

  <mat-tab label="Tab 2">
    <div *ngIf="selectedTab.value === 1"> ... </div>
  </mat-tab>

  <mat-tab label="Tab 3">
    <div *ngIf="selectedTab.value === 2"> ... </div>
  </mat-tab>

</mat-tab-group>

В компоненте у меня есть

@ViewChild(MatTabGroup) tabGroup: MatTabGroup;


ngAfterViewInit() {
  const index = Number(localStorage.getItem('userTabLocation')) || 0;
  this.tabGroup.selectedIndex = index;
}

handleMatTabChange(event: MatTabChangeEvent) {
  localStorage.setItem('userTabLocation', String(event.index));
}

Тесты:

Проверка, определен ли ViewChild, но это undefined.

it('Should have `ViewChild` variable defined', () => {
  expect(component.tabGroup).toBeDefined();
});

Также в некоторых других моих тестах я получаю:

TypeError: Cannot set property 'selectedIndex' of undefined

   99 |   }
  100 | 
> 101 |   ngAfterViewInit() {
      |   ^
  102 |     const index = Number(localStorage.getItem('userTabLocation')) || 0;
  103 |     this.tabGroup.selectedIndex = index;

То, что я пробовал:

1. Я прочитал эту действительно полезную статью https://blog.angularindepth.com/angular-unit-testing-viewchild-4525e0c7b756

2. Так как мой дочерний вид - MatTabGroup, я понятия не имею, как его заглушить, поэтому вышеприведенная статья не сильно помогла.Я пробовал это, но это сломало еще больше тестов:

   component.tabGroup = TestBed.createComponent(MatTabGroup).componentInstance as MatTabGroup;
   

3. Я добавил MatTabGroup в провайдеров, как это так, что не помогло:

   TestBed.configureTestingModule({
         imports: [ ... ],
         declarations: [ ... ],
         providers: [
         {
            provide: MatTabGroup,
         }],
   }).compileComponents();
   

4. Я добавил useValues ​​в провайдеров с помощью matTabGroup, что также не помогло:

   TestBed.configureTestingModule({
         imports: [ ... ],
         declarations: [ ... ],
         providers: [
         {
            provide: MatTabGroup,
            useValues: {
               selectedIndex: 0,
            }
         }],
   }).compileComponents();
   

5. Я добавил MatTabsModuleв импорт тоже не повезло:

   TestBed.configureTestingModule({
         imports: [ MatTabsModule ],
         declarations: [ ... ],
   }).compileComponents();
   

   Но это выдает следующую ошибку:

   Template parse errors:
   More than one component matched on this element.
   Make sure that only one component's selector can match a given element.
   Conflicting components: MatTab,MatTab ("
   

   (РЕДАКТИРОВАТЬ): это происходило потому, что я тоже импортировал MaterialModule.

Есть идеи?Действительно застрял на этом.

Заранее спасибо.