getDocumentElement null during testing

I’m using https://www.radix-ui.com/docs/primitives/components/dropdown-menu in our design system which ends up using floating-ui under the hood. Everything is working fine except in jest when I click on the trigger and the popover is supposed to appear I get the following error from floating-ui/dom:

/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/dom@0.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:133
    return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
                                                                                    ^

TypeError: Cannot read properties of null (reading 'documentElement')
    at getDocumentElement (/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/dom@0.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:133:85)
    at Object.convertOffsetParentRelativeRectToViewportRelativeRect (/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/dom@0.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:277:29)
    at detectOverflow (/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/core@0.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.umd.js:272:128)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at fn (/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/core@0.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.umd.js:825:26)
    at Object.computePosition (/Users/raza.jamil/dev/reckon-frontend/node_modules/.pnpm/@floating-ui/core@0.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.umd.js:141:11)

I’ve narrowed down the issue to this function https://github.com/floating-ui/floating-ui/blob/master/packages/dom/src/utils/getDocumentElement.ts.

It seems that (isNode(node) ? node.ownerDocument : node.document) || window.document) can be null causing the error. If I just use optional chaining and change it to (isNode(node) ? node.ownerDocument : node.document) || window.document)?. documentElement , the test starts working.

There’s some issue with the Codesandbox template provided, I can’t seem to run tests in it. I’ll work on it but in the meantime does this issue and the fix make sense or am I missing something?

[atomiks]

OK so running some tests locally, it seems like Jest 27-29 doesn’t have the issue (with jest-environment-jsdom@27-29)

For Jest 26 it looks like it’s this issue: https://github.com/facebook/jest/issues/8197#issuecomment-611880541

To fix it make sure you flush the microtask queue before the test finishes, this fixed it for me locally:

https://floating-ui.com/docs/react-dom#testing

[mkrds]

Hey @atomiks thanks for the reply. Yes updating Jest to 27^ fixes this issue. I’m a little bit hesitant about that as I’m one of the maintainers of a component library used by multiple projects in Sage organization and I’m afraid we might get swamped with GH issues from angry people confused why their test suites are failing with a slightly confusing error message. On the other hand Jest@26 is already 2 years so yeah, maybe it’s finally time for an upgrade