search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.06k stars 268 forks source link

Unit testing error: Cannot read properties of undefined (reading 'baseVal') #447

Open pascalbe-dev opened 1 year ago

pascalbe-dev commented 1 year ago

Are you reporting a bug, or opening a feature request?

Feature request

I want to make use of react-d3-tree in my unit tests.

What is the actual behavior/output?

I have a unit test of a react component which uses the react-d3-tree under the hood. The unit test is executed via vitest. When I run the unit test, then I get this error in the console and assertions on the tree UI are not working:

TypeError: Cannot read properties of undefined (reading 'baseVal') ❯ SVGSVGElement.defaultExtent node_modules/d3-zoom/src/zoom.js:25:30 ❯ new Gesture node_modules/d3-zoom/src/zoom.js:186:26 ❯ gesture node_modules/d3-zoom/src/zoom.js:178:42 ❯ SVGSVGElement. node_modules/d3-zoom/src/zoom.js:92:9 ❯ Selection.default [as each] node_modules/d3-selection/src/selection/each.js:5:37 ❯ zoom.transform node_modules/d3-zoom/src/zoom.js:91:29 ❯ Selection.default [as call] node_modules/d3-selection/src/selection/call.js:4:12 ❯ Tree.bindZoomListener node_modules/react-d3-tree/lib/esm/Tree/index.js:242:13 ❯ Tree.componentDidMount node_modules/react-d3-tree/lib/esm/Tree/index.js:192:14 ❯ commitLayoutEffectOnFiber node_modules/react-dom/cjs/react-dom.development.js:23310:28

What is the behavior/output you expect?

That I do not see any errors and the test can assert stuff inside the tree.

Any workaround is also welcome. I did not find a way to mock the not working part.

Can you consistently reproduce the issue/create a reproduction case (e.g. on https://codesandbox.io)?

Yes, but in a private codebase. Would take some effort to extract it. Therefore, I would wait for a response here first.

What version of react-d3-tree are you using?

3.5.0