Headless v2 makes resizeObserver mandatory for testing

[razzeee]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.4

What browser are you using?

jest

Describe your issue

After migrating to headless ui v2, most tests seem to fail due to us not having a resizeObserver.

I can get around this by mocking this globally:

global.ResizeObserver = jest.fn().mockImplementation(() => ({
  observe: jest.fn(),
  unobserve: jest.fn(),
  disconnect: jest.fn(),
}))

Comments here also suggest this, but I have never seen it on v1 https://github.com/tailwindlabs/headlessui/discussions/2832#discussioncomment-9408375

[RobinMalfait]

Hey!

The good news is that ResizeObserver has been around for years now and it's available in all major browsers. Unfortunately, it's not available in jsdom yet (https://github.com/jsdom/jsdom/issues/3368), which is why you are seeing these issues.

You can do a few things:

1. Use the polyfill you have, it's currently not used for something super critical (used to know when a button moved due to scroll or tab) and you likely won't see a change in the tests, so it's safe to polyfill.
2. Use the real polyfill:

   import ResizeObserver from 'resize-observer-polyfill'
   global.ResizeObserver = ResizeObserver

3. Try to use tests against a real browser instead using something like Playwright.

So going to close this for now because I don't consider this a bug of Headless UI. If we rely on new features of JavaScript that aren't available in major browsers we will make sure to polyfill them internally.

Hope this helps!

[razzeee]

To make it clear, I don't think this is a bug of Headless UI too. It's a bug in the v2 docs, which don't mention this.