Skip to content

Components do not fully render anymore with React 19 #1397

Closed
@Lukas-dev-threads

Description

@Lukas-dev-threads
  • @testing-library/react version: 16.1.0, 16.2.0 and 16.3.0
  • Testing Framework and version: vitest 3.1.2
  • DOM Environment: jsdom 26.1.0, happy-dom 17.4.4 (I tried both)
  • Node: v22.13.0

Relevant code or config:

test("Single button is created with the correct icon and can be clicked", async () => {
        let clicked = false;
        render(
            <Button />,
        );
        const button = screen.getByTestId("button");
        expect(button.getAttribute("icon")).toStrictEqual("delete");
});

The Button component is using a button component from a UI-Library based in the lit framework
from my company.
It will basically create a div with an icon attribute:

<div icon="delete"></div>

After upgrading to React 19 the result in the unit test environment is

<div></div>

What you did:

I upgraded from React 18 to 19 and I upgraded the React Testing Library to 16.3.0 because
React 19 is only supported by versions 16.1.0 and up.

What happened:

The application is running as expected in the browser with React 19.
Many of our unit tests are now failing, every failing test is either a snapshot test
or a test where we render a component and then check the existence of an attribute
that is created by the UI-Library.
The snapshot tests are failing for the same reason, before these included attributes like icon
but they are now missing.

Problem description:

Many of our tests depend on the elements being fully rendered, this would be a lot of work on our side to change.
I tried to reproduce the issue in stackblitz but I was unable to reproduce it without having access to the UI-Library.

It might be related to it.

https://stackblitz.com/edit/rtl-template-mpxqusqq

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions