No CSS styles in Cypress component test (Ionic React)

Question

I want to Cypress component test a list item component (Ionic React) like this:

describe("SearchResultItem component", () => {
  it("should render correctly", () => {
    // Mount the component
    cy.mount(
      <IonList>
        <IonItem>
          <IonLabel>
            <h2>flute</h2>
            <IonText className={"item-details"}>
              <div>
                <h3>
                  <Rating rating={4.5} totalRatings={4} />
                </h3>
                <IonRow>
                  <LicenseIcon license={"cc"}></LicenseIcon>
                  <p>
                    by <strong>{"Blackie666"}</strong>
                  </p>
                </IonRow>
              </div>
            </IonText>
          </IonLabel>
          <IonButton fill="clear" slot="end">
            <IonIcon className="ion-icon" icon={ellipsisHorizontal}></IonIcon>
          </IonButton>
        </IonItem>
      </IonList>
    );

    // assert things ...
  });
});

Unfortunately, the styles are not copied over:

Expected

Actual

Things I tried

I first used the official Cypress guide for the basic setup. Then I added css import statements to the support/component.ts file, which did not have any effect. I also found this article, with the same problem, but the solution does not work for me.

This is how my support/component.ts looks like:

import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
// import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

import "../../src/theme/variables.scss"

import './commands'

import { mount } from 'cypress/react18'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

Maybe I need a completely different approach just because Ionic React does not have a main.ts file but imports everything in App.tsx. Any suggestions very much welcome.