Breaking changes on Dialog causing jest + @testinglibrary/react to fail due to infinite loops #3740
Description
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
"@headlessui/react": "2.2.4",
"jest": "29.7.0",
"jest-axe": "10.0.0",
"jest-environment-jsdom": "29.7.0",
"next": "14.2.28",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.3.0",
"@testing-library/user-event": "14.6.1",
What browser are you using?
Browser N/A
jest.config.js
testEnvironment: 'jsdom'
Reproduction URL
N/A
Describe your issue
Tests that render the Dialog are failing with an error. It only fails when open is true.
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
export const MyDialog = ({
children,
trigger,
open,
...props
}) => {
return (
<>
{trigger}
<Dialog open={open} {...props}>
<DialogBackdrop />
<DialogPanel>
{children}
</DialogPanel>
</Dialog>
</>
);
};
test('should render the children when open is true', () => {
render(
<MyDialog open trigger={<button type="button">trigger</button>} onClose={jest.fn()}>
<div>hello world</div>
</MyDialog>,
);
expect(screen.getByText('hello world')).toBeInTheDocument();
});