React Jest Tests Failing Using Lottie.js Solved

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!