cdkStepper: Cannot assign out-of-bounds value to 'selectedIndex' error with CdkStepper Unit tests

Question

I have a custom component extending CdkStepper. I want to do coverage testing, but every unit tests involving selectedIndex have this error: cdkStepper: Cannot assign out-of-bounds value to 'selectedIndex' error with CdkStepper Unit tests

Stepper Component:

import { CdkStepper } from '@angular/cdk/stepper';
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css'],
  // eslint-disable-next-line
  providers: [{ provide: CdkStepper, useExisting: StepperComponent }]
})
export class StepperComponent extends CdkStepper {
  @Input() stepNames: string[] = [];
  @Output() index = new EventEmitter<number>();

  onClick(index: number): void {
    this.selectedIndex = index;
    this.index.emit(this.selectedIndex);
  }

  nextStep(): void {
    this.next();
    this.index.emit(this.selectedIndex);
  }

  previousStep(): void {
    this.previous();
    this.index.emit(this.selectedIndex);
  }
}

Stepper Tests:

import { CdkStepperModule } from '@angular/cdk/stepper';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StepperComponent } from './stepper.component';

describe('StepperComponent', () => {
  let component: StepperComponent;
  let fixture: ComponentFixture<StepperComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CdkStepperModule],
      declarations: [StepperComponent]
    })
    .compileComponents();

    fixture = TestBed.createComponent(StepperComponent);
    component = fixture.componentInstance;
    component.stepNames = ['Step 1', 'Step 2', 'Step 3'];
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should emit the correct index on onClick', () => {
    spyOn(component.index, 'emit');
    const testIndex = 1;
    component.onClick(testIndex);
    expect(component.index.emit).toHaveBeenCalledWith(testIndex);
  });

  it('should go to next step and emit the correct index', () => {
    spyOn(component, 'next').and.callThrough();
    spyOn(component.index, 'emit');
    component.selectedIndex = 0;
    component.nextStep();
    expect(component.next).toHaveBeenCalled();
    expect(component.index.emit).toHaveBeenCalledWith(component.selectedIndex);
  });

  it('should go to previous step and emit the correct index', () => {
    spyOn(component, 'previous').and.callThrough();
    spyOn(component.index, 'emit');
    component.selectedIndex = 2;
    component.previousStep();
    expect(component.previous).toHaveBeenCalled();
    expect(component.index.emit).toHaveBeenCalledWith(component.selectedIndex);
  });
});

I tried to generate the steps in the beforeEach with component.stepNames = ['Step 1', 'Step 2', 'Step 3'], but it does not seem to work.