Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

.getTotalLength is not a function #110

Open KutnerUri opened 2 years ago

KutnerUri commented 2 years ago

getting this error during tests: (Seems to be related to #72)

TypeError: _c.getTotalLength is not a function

...
      at Object.getPosition (node_modules/.pnpm/registry.npmjs.org+react-xarrows@2.0.2_react@16.13.1/node_modules/react-xarrows/lib/index.js:1124:90)
      at node_modules/.pnpm/registry.npmjs.org+react-xarrows@2.0.2_react@16.13.1/node_modules/react-xarrows/lib/index.js:180:37
      at commitHookEffectListMount (node_modules/.pnpm/registry.npmjs.org+react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom.development.js:19731:26)

version: 2.0.2 using Jest and react testing library.

DiaconuDan commented 2 years ago

Hey @KutnerUri @Eliav2 ,

Any updates on this ? I am also experiencing it.

Screenshot 2022-01-11 at 15 25 39

DiaconuDan commented 2 years ago

Meanwhile, I did not figured out the fix but did a workaround by disabling XArrows only in testing enviroment ( enabling it outside of testing enviroment basically )

{process.env.JEST_WORKER_ID === undefined && <ComponentWithXarrow > }

KutnerUri commented 2 years ago

I don't remember how I got around this.

JoshK2 commented 2 years ago

Any update on this?

robertpin commented 2 years ago

I get the same error using Jest and React testing library with TypeScript. Any updates?

maxPiroddi commented 2 years ago

Seems to still be no updates on this one...

For the time being, I have been working around it similar to DiaconuDan

{process.env.NODE_ENV !== 'test' && <Xarrow ... />

But definitely not an ideal solution!

robertpin commented 2 years ago

I was able to bypass it by mocking the component (I prefer not to conditionally render it based on the NODE_ENV).

jest.mock('react-xarrows', () => {
  return {
    __esModule: true,
    default: () => <span />,
    useXarrow: () => null,
  };
});