Components do not fully render anymore with React 19
Closed this issue · 1 comments
@testing-library/reactversion: 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.
As you've already mentioned here, since this isn't reproduced in stackblitz this doesn't seem like an issue with Testing-Library.
If you can try and create a reproduction with your UI framework - we'll do our best to help.