question-mark
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.

Error when use lottie-web and run test reactjs with Jest.

See original GitHub issue

I’m using lottie-web library in my reactjs project. When I run test, initially I got error:

Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

Screen Shot 2020-04-29 at 10 09 21

I’ve reseached and fixed it by install jest-canvas-mock:

        "setupFiles": [
            "<rootDir>/tests/setupJest.ts",
            "jest-canvas-mock"
        ],

But I’ve got new error: Error: connect ECONNREFUSED 127.0.0.1:80 😦

Screen Shot 2020-04-29 at 10 10 47

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8

github_iconTop GitHub Comments

2reactions
dimosmeracommented, May 12, 2021

Instead of mocking the module, you can also try importing jest-canvas-mock on your setupTests file

1reaction
bodymovincommented, May 3, 2020

hi, I think that for testing purposes you’d probably want to mock the lottie library. Otherwise it will try to load the animation through the network, which is probably what is happening in this case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Jest Tests Failing Using Lottie.js Solved | Rob Marshall
The error is caused by the import of the lottie-react package. After some research it seemed that Jest is not set up to...
Read more >
Lottie mocking is not working in react-testing-library [closed]
When I tried to run test cases I am getting the following error: TypeError: Cannot set property 'fillStyle' of null for line: import...
Read more >
lottie-react - npm
Start using lottie-react in your project by running `npm i ... Known Vulnerabilities Coverage Status Tested with jest GitHub license.
Read more >
React Lottie Play on hover tutorial - CodeSandbox
import lottie from "lottie-web";. function App() {. const container = useRef(null);. useEffect(() => {. lottie.loadAnimation({. container: container.current ...
Read more >
[Solved]-Unexpected token < in JSON at position 0 vuejs-Vue.js
Instead of using path use animationData and just set the animation object directly (instead of ... Unexpected token 'import' error while running Jest...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

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

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found