TypeError: Cannot set property 'fillStyle' of null
See original GitHub issueHey 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!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:6
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 usesjsdom
. 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:So to solve it, what I did was install
jest-canvas-mock
library, once installed I went to mysetupTest.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: