Description
@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.