Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Simple render testing give element.getTotalLength is not a function

See original GitHub issue

Describe the bug

I created this component and put it on my app page:

function Punch({ punchIt, initialIsExit }: { initialIsExit: boolean, punchIt(): Promise<void> }) {

  const [exit, setExit] = useState(initialIsExit);
  const [canDrag, setCanDrag] = useState<'x' | false>('x');
  const controls = useAnimation();
  const [ok, setOk] = useState(false);
  const x = useMotionValue(0);
  const background = useTransform(x, v => backgroundColorInterpolation(Math.abs(v)));
  const scale = useTransform(x, v => backgroundScaleInterpolation(Math.abs(v)));
  const color = useTransform(x, v => indicatorColorInterpolation(Math.abs(v)));
  const tickPath = useTransform(x, v => indicatorProgressInterpolation(Math.abs(v)));
  const [svgDisplay, setSvgDisplay] = useState('none');
  const okpath = useMotionValue(0);

  async function onDragEnd(event: MouseEvent, info: PanInfo) {

    if (Math.abs(info.point.x) > moveSize) {

      setCanDrag(false);

      await controls.start({
        x: exit ? -moveSize : moveSize,
        transition: {
          ease: 'easeOut'
        }
      });

      setExit(!exit);

      await punchIt();

      setOk(true);

      await controls.start({
        x: 0,
        left: exit ? 8 : moveSize + 8,
        transition: {
          delay: 0.5,
          duration: 0.6,

        }
      });

      setOk(false);
      setCanDrag('x');

      return;
    }

    await controls.start({
      x: 0,
      transition: {
        duration: 0.5
      }
    });

    setSvgDisplay('none');
  }

  function okAnimationComplete() {

    if (okpath.get() === 0) {

      setSvgDisplay('none');
    }
  }

  return (
    <div className="punch-container">
      <motion.span>
        {exit ? 'Sair' : 'Entrar'}
      </motion.span>
      <motion.div
        drag={canDrag}
        animate={controls}
        dragMomentum={false}
        dragElastic={1}
        className="punch-button"
        onDragStart={() => setSvgDisplay('block')}
        onDragEnd={onDragEnd}
        style={{ x, left: initialIsExit ? moveSize + 8 : 8 }}>

        <motion.div className="back" style={{ scale, background }} />

        <motion.div animate={{ rotate: exit ? 180 : 0 }} className="icon-container">
          <Icon>keyboard_arrow_right</Icon>
        </motion.div>
      </motion.div>
      <motion.svg viewBox="0 0 50 50" style={{ display: svgDisplay }}>
        <motion.path
          fill="none"
          strokeWidth="2"
          stroke={color}
          d="m 20 0 a 1 1 0 0 0 0 40 a -20 -20 20 0 0 0 -40"
          style={{ translateX: 5, translateY: 5, pathLength: tickPath }}
        />
        <motion.path
          fill="none"
          strokeWidth="2"
          stroke="black"
          d="M14,26 L 22,33 L 35,16"
          strokeDasharray="1 0"
          animate={{
            pathLength: ok ? 1 : 0,
            transition: {
              duration: 0.4
            }
          }}
          onAnimationComplete={okAnimationComplete}
          style={{ pathLength: okpath }}
        />
      </motion.svg>
    </div>
  );
}

But now when I try to run the test to render the entire app, throws this error:

To Reproduce

Create some component that animate pathLength of an SVG, os something like my Punch component.
Run the test renderer like:

it('should renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

See error:

TypeError: element.getTotalLength is not a function

      11 |   const div = document.createElement('div');
      12 |   ReactDOM.render(<App />, div);
    > 13 |   ReactDOM.unmountComponentAtNode(div);
         |            ^
      14 | });
      15 | 

      at svg (node_modules/framer-motion/node_modules/stylefire/lib/index.js:466:48)
      at createDOMStyler (node_modules/framer-motion/node_modules/stylefire/lib/index.js:491:18)
      at getStyler (node_modules/framer-motion/node_modules/stylefire/lib/index.js:501:48)
      at index (node_modules/framer-motion/node_modules/stylefire/lib/index.js:507:12)
      at node_modules/framer-motion/dist/framer-motion.cjs.js:564:25
      at commitHookEffectList (node_modules/react-dom/cjs/react-dom.development.js:17283:26)
      at commitPassiveHookEffects (node_modules/react-dom/cjs/react-dom.development.js:17307:3)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:149:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
      at commitPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:18774:9)
      at wrapped (node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:18822:5)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20570:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21105:12)
      at node_modules/react-dom/cjs/react-dom.development.js:21178:9
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:20459:10)
      at Object.unmountComponentAtNode (node_modules/react-dom/cjs/react-dom.development.js:21177:7)
      at Object.unmountComponentAtNode (src/App.spec.tsx:13:12)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: element.getTotalLength is not a function]
        at reportException (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18774:9)
        at wrapped (/home/rhogeranacleto/repos/dale-ponto/node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34) TypeError: element.getTotalLength is not a function
        at svg (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:466:48)
        at createDOMStyler (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:491:18)
        at getStyler (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:501:48)
        at index (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:507:12)
        at /home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/dist/framer-motion.cjs.js:564:25
        at commitHookEffectList (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:17283:26)
        at commitPassiveHookEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:17307:3)
        at HTMLUnknownElement.callCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:149:14)
        at invokeEventListeners (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18774:9)
        at wrapped (/home/rhogeranacleto/repos/dale-ponto/node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34)
        at flushPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18822:5)
        at scheduleRootUpdate (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20570:3)
        at updateContainerAtExpirationTime (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20600:10)
        at updateContainer (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20657:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20953:3)
        at legacyRenderSubtreeIntoContainer (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21105:12)
        at /home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21178:9
        at unbatchedUpdates (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20459:10)
        at Object.unmountComponentAtNode (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21177:7)
        at Object.unmountComponentAtNode (/home/rhogeranacleto/repos/dale-ponto/src/App.spec.tsx:13:12)
        at Object.asyncJestTest (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at processTicksAndRejections (internal/process/task_queues.js:86:5)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: element.getTotalLength is not a function]
        at reportException (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18774:9)
        at wrapped (/home/rhogeranacleto/repos/dale-ponto/node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34) TypeError: element.getTotalLength is not a function
        at svg (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:466:48)
        at createDOMStyler (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:491:18)
        at getStyler (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:501:48)
        at index (/home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/node_modules/stylefire/lib/index.js:507:12)
        at /home/rhogeranacleto/repos/dale-ponto/node_modules/framer-motion/dist/framer-motion.cjs.js:564:25
        at commitHookEffectList (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:17283:26)
        at commitPassiveHookEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:17307:3)
        at HTMLUnknownElement.callCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:149:14)
        at invokeEventListeners (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/rhogeranacleto/repos/dale-ponto/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18774:9)
        at wrapped (/home/rhogeranacleto/repos/dale-ponto/node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34)
        at flushPassiveEffects (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:18822:5)
        at scheduleRootUpdate (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20570:3)
        at updateContainerAtExpirationTime (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20600:10)
        at updateContainer (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20657:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20953:3)
        at legacyRenderSubtreeIntoContainer (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21105:12)
        at /home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21178:9
        at unbatchedUpdates (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:20459:10)
        at Object.unmountComponentAtNode (/home/rhogeranacleto/repos/dale-ponto/node_modules/react-dom/cjs/react-dom.development.js:21177:7)
        at Object.unmountComponentAtNode (/home/rhogeranacleto/repos/dale-ponto/src/App.spec.tsx:13:12)
        at Object.asyncJestTest (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/home/rhogeranacleto/repos/dale-ponto/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at processTicksAndRejections (internal/process/task_queues.js:86:5)

  console.error node_modules/react-dom/cjs/react-dom.development.js:17117
    The above error occurred in the <ForwardRef(MountMotionValuesComponent)> component:
        in ForwardRef(MountMotionValuesComponent)
        in ForwardRef(MountMotionValuesComponent) (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (at Punch.component.tsx:105)
        in svg (created by RenderComponent)
        in RenderComponent (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (at Punch.component.tsx:104)
        in div (at Punch.component.tsx:84)
        in Punch (at Home.page.tsx:24)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at Home.page.tsx:23)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at Home.page.tsx:19)
        in HomePage (created by Context.Consumer)
        in Route (at App.tsx:26)
        in Switch (at App.tsx:25)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at App.tsx:24)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at App.tsx:17)
        in Router (created by BrowserRouter)
        in BrowserRouter (at App.tsx:15)
        in App (at App.spec.tsx:12)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  console.error node_modules/react-dom/cjs/react-dom.development.js:17117
    The above error occurred in the <ForwardRef(MountMotionValuesComponent)> component:
        in ForwardRef(MountMotionValuesComponent)
        in ForwardRef(MountMotionValuesComponent) (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (at Punch.component.tsx:112)
        in svg (created by RenderComponent)
        in RenderComponent (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (at Punch.component.tsx:104)
        in div (at Punch.component.tsx:84)
        in Punch (at Home.page.tsx:24)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at Home.page.tsx:23)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at Home.page.tsx:19)
        in HomePage (created by Context.Consumer)
        in Route (at App.tsx:26)
        in Switch (at App.tsx:25)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at App.tsx:24)
        in div (created by Styled(MuiBox))
        in Styled(MuiBox) (at App.tsx:17)
        in Router (created by BrowserRouter)
        in BrowserRouter (at App.tsx:15)
        in App (at App.spec.tsx:12)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Expected behavior

To not throw an error and pass in render test

Screenshots

Already attached

Desktop (please complete the following information):

OS: Linux
Browser chrome (any)
Version framer-motion: 1.2.2, react: 16.8.6

Additional context

When I mock the component with something like, pass correctly (although I do not want to do this)

jest.mock('./pages/Home/Punch.component', () => ({
  Punch:  jest.fn().mockReturnValue(<div></div>)
}));

Issue Analytics

State:
Created 4 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

24reactions

thebuildercommented, Aug 5, 2020

After upgrading to version 2.x, my tests started failing with this error message.

It’s caused by this piece of code:

    /**
     * Update the SVG dimensions and path length
     */
    SVGVisualElement.prototype.measure = function () {
        try {
            this.dimensions =
                typeof this.element.getBBox ===
                    "function"
                    ? this.element.getBBox()
                    : this.element.getBoundingClientRect();
        }
        catch (e) {
            // Most likely trying to measure an unrendered element under Firefox
            this.dimensions = { x: 0, y: 0, width: 0, height: 0 };
        }
        if (isPath(this.element)) {
            this.totalPathLength = this.element.getTotalLength();
        }
    };

With this.element.getTotalLength(); throwing the error, since getTotalLength doesn’t exist on the SVGElement. What changed, since it was working in version 1.x?

For now I’ve solved it by adding the following to my test setup file, to make sure it’s defined:

if (!SVGElement.prototype.getTotalLength) {
  SVGElement.prototype.getTotalLength = () => 1;
}

0reactions

paramsinghvccommented, Feb 11, 2021

Isn’t there a proper polyfill for extending SVG base classes like SVGGeometryElement etc to include in test environments?

Top Results From Across the Web

Ref on svg <path /> doesn't have "getTotalLength()"-Method

Uncaught TypeError : element.getTotalLength is not a function. I have no clue why it's behaving like this. I expected to get the DOM...

typeerror: e.gettotallength is not a function syncfusion - You.com

You are trying to create a normal HTML-Element called path , which does not have any function called path.getTotalLength() . Try document.

SVG PATH getTotalLength() returns 0 for Bezier curves (using ...

Issues with the layout or rendering of SVG content and interacting with the SVG DOM. Example bugs: SVG marker can not be clipped...

An SVG Primer for Today's Browsers - W3C

Calling Javascript functions in HTML documents from events in SVG DOM ... So long as one is familiar with the basic elements being...

Raphaël Reference - Animation - GitHub Pages

See Paper.set. Note: Glow is not connected to the element. If you change element attributes it won't adjust itself. Parameters. glow ...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

[BUG] Simple render testing give element.getTotalLength is not a function

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

RFC: sizeTransition

Does not seem to fully support styled-components?