Angular Material components loose classes and harness tests break

[MikeDabrowski]

Whats going on

I have a quite simple component where it is just a header, form with single mat-select and two custom button components.
The test that is failing is just asserting the harness for the mat-select is truthy.

When I run the test in the browser via karma I see the <mat-select> tag rendered. The error I am getting is

(MatSelectHarness with host element matching selector: ".mat-mdc-select")

Here is my setup

beforeEach(() =>
    MockBuilder()
      .beforeCompileComponents((testBed) =>
        testBed.configureTestingModule({
          schemas: [NO_ERRORS_SCHEMA],
        }),
      )
      .keep(TranslocoModule)
      .keep(TranslocoDirective)
      .provide(provideTranslocoForTesting())
      .provide({ provide: AVAILABLE_LANGUAGES, useValue: ['en', 'de'] })
      .keep(ChangeLanguageComponent, { shallow: true })
      .replace(BrowserAnimationsModule, NoopAnimationsModule)
      .keep(ReactiveFormsModule)
      .keep(FormBuilder)
      .keep(MatFormFieldModule)
      .keep(MatSelectModule)
      .keep(MatInputModule)
      .keep(MatCommonModule)
      // .keep(MatSelectTrigger)
      // .keep(MatSelect)
      .keep(CommonModule)
      .keep(MatOptionModule)
      .keep(MatSelectHarness)
      .keep(NG_MOCKS_ROOT_PROVIDERS)
      .keep(UpperCasePipe)
      .mock(LanguageFlagPipe),
  );

There are two commented out lines. Enabling them makes the <mat-select> get its css class ".mat-mdc-select" but breaks the test (whole runner actually) with

Message: TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.'

When I was creating the reproduction on stackblitz it turned out to be working. I then copied over the code to my local app and still had the same error. What could be the case?

Obviously I have tons of other packages in the project and I am in the middle of migration from Angular 17 to Angular 18

A repro that actually works fine

Link: https://stackblitz.com/edit/github-kh7tt7?file=src%2Fapp%2Fsimple-form%2Fsimple-form.component.spec.ts

[MikeDabrowski]

And also the following works

beforeEach(async () => {
    await TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        provideTranslocoForTesting(),
        { provide: AVAILABLE_LANGUAGES, useValue: ['en', 'de'] },
      ],
      imports: [
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        NoopAnimationsModule,
        ChangeLanguageComponent,
        MockPipe(LanguageFlagPipe),
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ChangeLanguageComponent);
    component = fixture.componentInstance;
    loader = TestbedHarnessEnvironment.loader(fixture);
    fixture.detectChanges();
  });