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!