React Jest Tests Failing Using Lottie.js Solved

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!