[BUG] Simple render testing give element.getTotalLength is not a function about motion HOT 7 CLOSED

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;
}

from motion.

This is a bug in JSDom: jsdom/jsdom#1330

I'm going to leave this ticket open as we can probably duck-type this in https://github.com/Popmotion/popmotion/tree/master/packages/stylefire so it at the very least doesn't break tests.

from motion.

🎉 🎉

from motion.

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

Yep, experiencing the same problem after upgrading framer-motion from v1.10.3 to v2.3.0. This happens only when using JSDOM (with Enzyme) while under test. Everything works as expected in a standard browser environment.

Thanks for the snippet, that helped me to work around the problem for the time being.

from motion.

Any update on this issue, except including the above snippet code?

from motion.

Also experience this issue, this error occurred in a component: Error: Uncaught [TypeError: this.element.getTotalLength is not a function]

version: 3.2.2-rc.1

from motion.

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

from motion.