React Jest Tests Failing Using Lottie.js Solved

Last Updated:
Lottie and Jest Logos

Lottie is a JS library that renders After Effects animations in real time. This means that rather than spending time crafting CSS transition, or manually creating SVG animations – the whole process is relatively plug and play.

That is, until you begin testing your application. I found as soon as I ran ‘npm test’ almost all of the tests crashed with the following error:

 

TypeError: Cannot set property ‘fillStyle’ of null

 

The error is caused by the import of the lottie-react package.

After some research it seemed that Jest is not set up to handle canvas properly. There is a simple fix for this.

  • Install jest-canvas-mock.
    npm i --save-dev jest-canvas-mock
  • Add jest-canvas-mock to your setups tests file.
    //setupTests.js
    import 'jest-canvas-mock';
  • Run your tests.

This should clean up the error!

Related Posts

Get helpful Jest Pieces right to your inbox

Keep up to date with all helpful bits of Jest snippets and articles.