Test broke with invalid selector after upgrading from v14 to v15

[benjamindulau]

Describe the bug

I'm not sure where the problem is exactly. We have the following test code:

import {
  render as rtlRender,
  RenderOptions,
  RenderResult,
} from "@testing-library/react";
import mediaQuery from "css-mediaquery";
import { ReactElement, ReactNode } from "react";
import { beforeEach, afterEach, test, expect, describe } from "vitest";

import {
  MediaConditional,
  MediaContextProvider,
  mediaConfig,
  mediaStyle,
} from "./media";

type CustomRenderOptions = RenderOptions;

function render(
  ui: ReactElement,
  { ...renderOptions }: CustomRenderOptions = {},
): RenderResult {
  function Wrapper({ children }: { children: ReactNode }) {
    return <MediaContextProvider>{children}</MediaContextProvider>;
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}

const mdMediaId = "data-testid-md";
const lgMediaId = "data-testid-lg";

const Component = (
  <MediaContextProvider>
    <MediaConditional.Mobile>
      <p data-testid={mdMediaId}>
        Affichage moins de {mediaConfig.breakpoints.lg} px
      </p>
    </MediaConditional.Mobile>
    <MediaConditional.Desktop>
      <p data-testid={lgMediaId}>
        Affichage Plus de {mediaConfig.breakpoints.lg} px
      </p>
    </MediaConditional.Desktop>
  </MediaContextProvider>
);

describe("Media Conditional Custom Component", () => {
  beforeEach(() => {
    const style = document.createElement("style");
    style.innerHTML = mediaStyle;
    document.head.appendChild(style);
  });

  afterEach(() => {
    document.head.innerHTML = ""; // Clear all styles injected during the test
  });

  test("small screen", () => {
    mockScreenSize(400);
    const view = render(Component);
    expect(view.getByTestId(mdMediaId)).toBeTruthy();
    expect(view.queryByTestId(lgMediaId)).toBeNull();
  });
  test("large screen", () => {
    mockScreenSize(1400);
    const view = render(Component);
    expect(view.queryByTestId(mdMediaId)).toBeNull();
    expect(view.getByTestId(lgMediaId)).toBeTruthy();
  });
});

function createMatchMedia(width: number) {
  return (query: string) => {
    return {
      matches: mediaQuery.match(query, { width }),
      media: "",
      addListener: () => 1,
      removeListener: () => 1,
      onchange: () => 1,
      addEventListener: () => 1,
      removeEventListener: () => 1,
      dispatchEvent: () => true,
    };
  };
}

function mockScreenSize(width: number) {
  window.matchMedia = createMatchMedia(width);
}

Which fails after upgrading from 14.12.3 to 15.7.4 with the following error:

Tests are green with version 14.12.3...

Note that we use https://github.com/artsy/fresnel which adds CSS class names. But it seems fine outside of the tests.