d3.drag() causes error in testing mousedown event via jsdom
HesamSe opened this issue · 4 comments
Adding d3.drag() causes error in testing mousedown event via jest in jsdom environment.
Testcase:
import * as React from 'react';
import {render,fireEvent} from "@testing-library/react";
import App from './App';
describe("Test suite",() => {
it("fire mousedown event",() => {
const wrapper = render(<App/>);
const circle = wrapper.container.querySelector('svg').querySelector("text");
fireEvent.mouseDown(circle);
});
});
Error:
Error: Uncaught [TypeError: Cannot read property 'document' of null]
at reportException (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
at invokeEventListeners (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:209:9)
at SVGElementImpl._dispatch (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
at SVGElementImpl.dispatchEvent (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
at SVGElement.dispatchEvent (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
at C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\dom\dist\events.js:25:20
at C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\react\dist\pure.js:64:16
at batchedUpdates$1 (C:\MyFiles\workspace\d3-bug\node_modules\react-dom\cjs\react-dom.development.js:21856:12)
at act (C:\MyFiles\workspace\d3-bug\node_modules\react-dom\cjs\react-dom-test-utils.development.js:929:14)
at Object.eventWrapper (C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\react\dist\pure.js:63:28) TypeError: Cannot read property 'document' of null
at nodrag (C:\MyFiles\workspace\d3-bug\node_modules\d3-drag\dist\d3-drag.js:18:19)
at SVGElement.mousedowned (C:\MyFiles\workspace\d3-bug\node_modules\d3-drag\dist\d3-drag.js:121:5)
at SVGElement.<anonymous> (C:\MyFiles\workspace\d3-bug\node_modules\d3-selection\dist\d3-selection.js:742:14)
at invokeEventListeners (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:193:27)
at SVGElementImpl._dispatch (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
at SVGElementImpl.dispatchEvent (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
at SVGElement.dispatchEvent (C:\MyFiles\workspace\d3-bug\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
at C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\dom\dist\events.js:25:20
at C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\react\dist\pure.js:64:16
at batchedUpdates$1 (C:\MyFiles\workspace\d3-bug\node_modules\react-dom\cjs\react-dom.development.js:21856:12)
at act (C:\MyFiles\workspace\d3-bug\node_modules\react-dom\cjs\react-dom-test-utils.development.js:929:14)
at Object.eventWrapper (C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\react\dist\pure.js:63:28)
at fireEvent (C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\dom\dist\events.js:16:35)
at Function.fireEvent.<computed> [as mouseDown] (C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\dom\dist\events.js:124:36)
at Function.mouseDown (C:\MyFiles\workspace\d3-bug\node_modules\@testing-library\react\dist\fire-event.js:18:52)
at Object.<anonymous> (C:\MyFiles\workspace\d3-bug\src\App.test.jsx:9:19)
at Object.asyncJestTest (C:\MyFiles\workspace\d3-bug\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:102:37)
at C:\MyFiles\workspace\d3-bug\node_modules\jest-jasmine2\build\queueRunner.js:43:12
at new Promise (<anonymous>)
at mapper (C:\MyFiles\workspace\d3-bug\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
at C:\MyFiles\workspace\d3-bug\node_modules\jest-jasmine2\build\queueRunner.js:73:41
at processTicksAndRejections (internal/process/task_queues.js:93:5)
Here is a complete example:
d3-bug.zip
@mbostock why close this issue?
Wouldn't it be better to give an explanation about the question asked?
I have this problem too.
Ah - there's usually a template that goes with issue closures of this sort. I'm guessing (but not 100% sure) that the closure is of this spirit. Pasting it here from another closed issue:
It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.
If you have further questions, please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.
If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.
Thank you! 🤗
Originally posted by @mbostock in #51 (comment)
Also, the .zip is included, but there are no instructions for how to reproduce the error. That would also help.
Another aspect is, D3 is designed to support working in the browser. Getting it to work in a React testing context with JSDom is not really a core use case for D3, and my guess is that this is probably a shortcoming of the testing environment, rather than a shortcoming of D3.
I did a little digging here and was able to reproduce the error locally, by running npm test.
I tracked down the error to this part of d3-drag:
function nodrag(view) {
var root = view.document.documentElement,
selection = d3Selection.select(view).on("dragstart.drag", noevent, true);
if ("onselectstart" in root) {
selection.on("selectstart.drag", noevent, true);
} else {
root.__noselect = root.style.MozUserSelect;
root.style.MozUserSelect = "none";
}
}It's the view.document line that is throwing the error. Apparently there is no .document property defined on the view object.
function mousedowned(event, d) {
if (touchending || !filter.call(this, event, d)) return;
var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
if (!gesture) return;
d3Selection.select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
nodrag(event.view);
nopropagation(event);
mousemoving = false;
mousedownx = event.clientX;
mousedowny = event.clientY;
gesture("start", event);
}The view object is derived from the event object.
Here's the relevant bit of d3-selection code that passes the event object into mousedowned:
function contextListener(listener) {
return function(event) {
listener.call(this, event, this.__data__);
};
}I think it comes down to the fact that d3-drag was designed to work only in the browser. The browser does provide event.view.document, and this Node-based testing setup does not provide event.view.document apparently.
The question here really is - should d3-drag support non-browser environments?
If so, how much effort is warranted to make this happen?
If anyone with deep knowledge of these testing tools and simulating the DOM API in Node has a proposed solution, it would be great to see a PR contributed for non-browser support.
I found a solution to this specific problem. The fireEvent mouse* methods have options. passing in jsdom's global.window into view should populate D3's view.document.documentElementdown the line:
fireEvent.mouseDown(scrollBarHandle, {
clientX,
clientY,
...,
view: global.window,
});For anyone else grappling with this problem, note that there isn't much SVG support with jsdom and you might find other issues with D3's test setup with jsdom