veltman / flubber

Tools for smoother shape animations.
MIT License
6.61k stars 167 forks source link

Jest test fails: r.getTotalLength is not a function #101

Closed ericbf closed 5 years ago

ericbf commented 5 years ago

I'm using flubber in a react component using jest to test. I initialize the interpolator statically:

static readonly interpolator = interpolate(fromShape, toShape, {
        maxSegmentLength: 0.1,
});

And call it using react-spring

<Spring
    native={true}
    from={{ t: 0 }}
    to={{
        t:
            this.state.which
                ? 1
                : 0,
    }}
>
    {({ t }) => (
        <animated.path
            d={t.interpolate(
                Class.interpolator,
            )}
        />
    )}
</Spring>

When I run tests the test for this component now fails with this error:

TypeError: r.getTotalLength is not a function
      at R (node_modules/flubber/build/flubber.min.js:1:7808)
      at Q (node_modules/flubber/build/flubber.min.js:1:7390)
      at J (node_modules/flubber/build/flubber.min.js:1:8565)
      at Fn (node_modules/flubber/build/flubber.min.js:2:17798)
      ...
veltman commented 5 years ago

I'm not a Jest expert, but I believe Jest uses jsdom under the hood, which has limited SVG support - you might want to look into Jest SVG mocks?

ericbf commented 5 years ago

Ended up mocking flubber in all the tests that use it. Thanks!