document is null during testing

[raza-jamil-reckon]

Bug report

Current Behavior

I'm trying to test the clicking of a drop down item. I found out that I have to mock window.PointerEvent which I'm doing per this answer. When I open the menu using the pointer event in my unit test, it throws the following error:

/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:134
    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:134: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:278: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)

It basically boils down to this function in floating-ui: https://github.com/floating-ui/floating-ui/blob/master/packages/dom/src/utils/getDocumentElement.ts where document seems to be null. If I make it chain optionally on my local it starts working fine.

I can confirm that window.document is not null inside my test.

Expected behavior

The menu should open.

Reproducible example

import React from "react";
import { fireEvent, render } from "@testing-library/react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";

const DropdownMenuDemo = () => {
  return (
    <div>
      <DropdownMenuPrimitive.Root>
        <DropdownMenuPrimitive.Trigger asChild>
          <button>Show pay item menu</button>
        </DropdownMenuPrimitive.Trigger>

        <DropdownMenuPrimitive.Portal>
          <DropdownMenuPrimitive.Content sideOffset={5}>
            <DropdownMenuPrimitive.Item>Delete</DropdownMenuPrimitive.Item>
          </DropdownMenuPrimitive.Content>
        </DropdownMenuPrimitive.Portal>
      </DropdownMenuPrimitive.Root>
    </div>
  );
};

export class MockPointerEvent extends Event {
  button: number;
  ctrlKey: boolean;
  pointerType: string;

  constructor(type: string, props: PointerEventInit) {
    super(type, props);
    this.button = props.button || 0;
    this.ctrlKey = props.ctrlKey || false;
    this.pointerType = props.pointerType || "mouse";
  }
}

window.PointerEvent = MockPointerEvent as any;

describe("test", () => {
  it("thing", async () => {
    const { getAllByText } = render(<DropdownMenuDemo />);
    const menuButton = getAllByText(`Show menu`);
  });
});

Suggested solution

I'm not sure if it's a radix issue or popper or floating-ui issue or my setup issue. Any help would be appreciated.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	1.0.0
React	n/a	16.13.1
Browser	Chrome	105.0.5195.125 (Official Build) (arm64)
Assistive tech
Node	n/a	16.17.0
npm/yarn	pnpm	5.18.9
Operating System	MacOS Monterey	12.5

[benoitgrelard]

Hi @raza-jamil-reckon,

It might be worth asking about this on the floating-ui repo instead as the code seems located there.

[huynhthaianhhd]

@raza-jamil-reckon @benoitgrelard

I have also problem with popover & i solved it.

i only just wrap Popover/Dropdown by tag div and it worked.

it('render popover', () => {
    const { container } = render(
      <div>
        <Popover open={true} onOpenChange={() => {}} target={<div>Bottom popover</div>}>
          <div>Popover</div>
        </Popover>
      </div>
    )

    expect(container).toMatchSnapshot()
  })

[jvidalv]

Having this same issue, I also asked on floating-ui, but I think this must be on radix-ui:

floating-ui/floating-ui#1908

Happening to me too, and I'm also using radix-ui, but I don't see how this could interact in this in a way that breaks it.

"jest": "29.2.1",
"jest-environment-jsdom": "29.2.1",
"next": "12.3.1",
"@radix-ui/react-popover": "1.0.2",

The first error was ResizeObserver not being defined, which makes sense, but once this is fixed the next error I get after the tests pass is this one:

TypeError: Cannot read properties of null (reading 'documentElement')
    at getDocumentElement (/Users/jvidalv/Projects/website/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:133:85)

---

@raza-jamil-reckon @benoitgrelard

I have also problem with popover & i solved it.

i only just wrap Popover/Dropdown by tag div and it worked.

it('render popover', () => {
    const { container } = render(
      <div>
        <Popover open={true} onOpenChange={() => {}} target={<div>Bottom popover</div>}>
          <div>Popover</div>
        </Popover>
      </div>
    )

    expect(container).toMatchSnapshot()
  })

This must be working because you are never interacting in any way with the popover, but in more complex tests (Where you really interact with it) its exploding.

[atomiks]

Did some debugging here: floating-ui/floating-ui#1908 (comment)

In summary:

• Jest 26- appears to have the issue; Jest 27+ doesn't error. You can try upgrading Jest.
• For Jest 26-, flush the microtask queue before the test finishes (see https://floating-ui.com/docs/react-dom#testing)

[benoitgrelard]

Closing as a solution was provided by @atomiks above ☝️

[grelas]

I'm on jest 27.5.0 and am trying to upgrade to node 18 - still getting TypeError: Cannot read properties of null (reading 'documentElement') 😢