Error clicking node in React Flow in jest test with @testing-library

Describe the Bug

We have test runned with jest and react-testing-library. When test is run, everything works fine until node or any element inside node is clicked:

TypeError: Cannot read properties of null (reading 'document')

      at Ke (node_modules/reactflow/dist/umd/index.js:10:15269)
      at HTMLDivElement.E (node_modules/reactflow/dist/umd/index.js:10:74213)
      at HTMLDivElement.<anonymous> (node_modules/reactflow/dist/umd/index.js:10:7374)
      at HTMLDivElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLDivElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLDivElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLDivElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:43
      at node_modules/@testing-library/react/dist/pure.js:64:16
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.eventWrapper (node_modules/@testing-library/react/dist/pure.js:63:28)
      at Object.wrapEvent (node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:8:28)
      at Object.dispatchEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22)
      at Object.dispatchUIEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26)
      at Mouse.down (node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:70:34)
      at PointerHost.press (node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:27:24)
      at pointerAction (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:59:43)
      at Object.pointer (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:15)
      at node_modules/@testing-library/react/dist/pure.js:57:16

I have tried to add nodesDraggable={false} to ReactFlow and className='nodrag' to Node, but that doesn’t help. We have added needed lines described in documentation to testUtils.ts. Nodes and elements inside nodes are rendered and pass test.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Unfortunately can’t share any actual code, other than test case:

const user = userEvent.setup();
const { getAllByText, getByTestId, getByText } = render(<WrappedReactFlow />);
await waitForElementToBeRemoved(getByTestId('loading-spinner'));
expect(getAllByText(/node title/i).length).toBe(1);
const node = getByText(/node title/i);
await user.click(node);

That’s pretty much is failing test case. Last line produces the error.

Wrapper includes mocks to redux store, API calls, history and GraphQL (moving to GQL, but still using some legacy for a while) and everything with those seem to work, as nodes are rendered.

Expected behavior

As a user I expect Node to be selected with no error and I can further test my app.

Screenshots or Videos

No response

Platform

• OS: macOS, Linux
• Browser: no browser
• Version: 11.1.1
• React 17
• Jest 27.4.4
• @testing-library/react 11.2.5
• @testing-libaray/user-event 14.4.3

Additional context

No response

[quantti]

I can select node, but not with just mouse click. Could be something with how my custom node is built, as it is selectable by space after clicking it and it can be selected by tab. Anyway was able to get around it. Thanks again!

[moklick]

Why can’t you select a node?