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.
    import 'jest-canvas-mock';
  • Run your tests.

This should clean up the error!

Related Posts