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

[amagee-willow]

Describe the Bug

I have a jest test that renders a component using React Flow and then clicks an element inside one of the nodes. I receive this exception:

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

      at documentElement (node_modules/react-flow-renderer/node_modules/d3-drag/src/nodrag.js:5:28)
      at HTMLDivElement.h (node_modules/react-flow-renderer/node_modules/d3-drag/src/drag.js:59:19)
      at HTMLDivElement.__data__ (node_modules/react-flow-renderer/node_modules/d3-selection/src/selection/on.js:3:37)
      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:350:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
      at HTMLDivElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
      at HTMLDivElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLDivElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:43
      at node_modules/@testing-library/react/dist/pure.js:79:16
      at node_modules/@testing-library/react/dist/act-compat.js:64:24
      at act (node_modules/react/cjs/react.development.js:2512:16)
      at node_modules/@testing-library/react/dist/act-compat.js:63:25
      at Object.eventWrapper (node_modules/@testing-library/react/dist/pure.js:78: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 Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:71:14)

Your Example Website or App

https://github.com/amagee-willow/react-flow-test-click

Steps to Reproduce the Bug or Issue

1. Clone repo from above
2. npm install
3. npm run test
4. Observe error

Expected behavior

The click should be successful and there should be no error

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: None (just using jest - see package.json for versions)

Additional context

No response

[amagee-willow]

For what it's worth / in case anyone else has found the same issue, I've realised I can work around the issue by creating a test version of the button inside a Portal.

[chrtze]

I think the error comes from d3-drag, which doesn't support being run in a non-browser environment (similar issue here: d3/d3-drag#79). We are using d3-drag to drag the nodes and the error is produced because d3-drag monitors the mousedown event.

To disable d3-drag in your test, you have two options:

• Set nodesDraggable={false} in React Flow (https://reactflow.dev/docs/api/react-flow-props/#nodesdraggable)
• Add className='nodrag' to the element inside your custom node that you want to click. This will prevent the dragging behaviour for this element.

I have tested both options in the repository you provided and the test was run successfully. Let me know if this works for you.

[amagee-willow]

Thank you. I used className='nodrag' and that solved the problem for me.

[penx]

Upstream issue and PR raised

• Support d3.drag in testing environments d3/d3-drag#89
• Support d3.drag in testing environments d3/d3-drag#90

[atreidesend]

sry to resurrect a dead thread, but I'm seeing the same reported error arise again on the latest version of reactflow when using userEvent.click(...) on a node

this is even with nodesDraggable set to false

I think I've tracked it down this time to coming from the d3-zoom library (which calls back to d3-drag under the hood), which is being initiated no matter what in the ZoomPane - https://github.com/wbkd/react-flow/blob/main/packages/core/src/container/ZoomPane/index.tsx#L86

that's about as far as I got without digging into the internals of d3-zoom, but wondering if anyone here has also run into that?

[matttk]

Yeah, I get the error when testing in Storybook with userEvent.click when using nodesDraggable={false}. I tried adding the nodrag class instead but this doesn't seem to work at all.

Surely people are writing tests for react flow but even requiring nodesDraggable={false} to be able to test at all is very surprising to me. What if you wanted to test dragging a node? 🤔

At any rate, you can't write Storybook tests involving clicking, since they fail on this unhandled exception.

[moklick]

@matttk thanks for the update here. We will check again if there is a way to solve this.

[szpytfire]

Also facing this issue (and have done exactly as @matttk!).

Upgrading / downgrading the reactflow version doesn't seem to help either