TypeError: Cannot set property 'fillStyle' of null

Hey guys

First of all, thanks for your job with this, is really amazing and easy to use

I’m having this issue when I’m trying to test a component where I’m using react-lottie, also, keep in mind that this is happening when jest is trying to import Lottie. This is my component:

MyComponent.js

import React from 'react';
import Lottie from 'react-lottie';
mport loaderAnimation from './loaderData.json';
import profileAnimation from './profileData.json';

class AnimatedImages extends PureComponent {
  getAnimationData = () => {
    const { image } = this.props;
    switch (image) {
      case 'loader':
        return loaderAnimation;

      case 'profile':
        return profileAnimation;

      default:
        return loaderAnimation;
    }
  };

  render() {
    const { loop } = this.props;
    return (
      <div className="loader-wrapper">
        <Lottie
          options={{
            animationData: this.getAnimationData(),
            loop,
            autoplay: true
          }}
        />
      </div>
    );
  }
}

And my test file

MyComponent.spec.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import MyComponent from './MyComponent';

jest.mock('lottie-web'); // I have tried mock the animation data, nothing
jest.mock('react-lottie');

describe('Animated images component', () => {
  it('should render with crashing', () => {
    const component = shallow(<AnimatedImages />); // I have tried it with mount, but nothing
    expect(component).toBeDefined();
  });
});

Once I run the test I got the error mentioned above and I’m not able to test the component properly. It will be great if you guys mention, if I’m doing something wrong, in your documentation the proper way to do unit tests for the components made with react-lottie. I saw your code and I notice that you have a test file, but I think is not very accurate for this particular case.

Let me know, if I’m doing something wrong, if not, I think that this is probably a bug for the component.

Thank you guys in advance!

[eliasrodeloso]

UPDATE: I solved the problem, it wasn’t a bug, is a bad configuration issue: there is to add the canvas element to Jest, remember that Jest uses jsdom. I realized that, once I stopped trying to test the component and try to find and workaround for the other components and the console showed me the actual error:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports ...

So to solve it, what I did was install jest-canvas-mock library, once installed I went to my setupTest.js and imported it globally. Probably I will make a PR with this info for the documentation.

Hopefully this will help some one else in the future.

[afsanefdaa]

UPDATE: I solved the problem, it wasn’t a bug, is a bad configuration issue: there is to add the canvas element to Jest, remember that Jest uses jsdom. I realized that, once I stopped trying to test the component and try to find and workaround for the other components and the console showed me the actual error:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports ...

So to solve it, what I did was install jest-canvas-mock library, once installed I went to my setupTest.js and imported it globally. Probably I will make a PR with this info for the documentation.

Hopefully this will help some one else in the future.

I did the same with updating my setting to:

{
  "jest": {
    "setupFiles": ["./__setups__/other.js", "jest-canvas-mock"]
  }
}