unit test raises error because of .getContext() is not implemented
JavascriptCanvasJestjsJsdomJavascript Problem Overview
I am writing tests using Jest for components that use canvas elements. I keep getting an error when I run my tests that looks like this.
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
From my understanding Jest uses jsdom for its testing and that jsdom is compatible with canvas if you install the canvas or canvas-prebuilt packages.
I have tried installing each of these packages and neither of them have resolved the error. The only thing that I think could be going wrong is that jsdom cannot find the canvas or canvas-prebuilt packages. Does anyone know a way to fix this error or test to see if jsdom is finding the other packages? Thanks a lot!
Javascript Solutions
Solution 1 - Javascript
My team is using create-react-app
and we had previously addressed this problem by adding the npm package jest-canvas-mock
. Now after upgrading to react-scripts 3.4.1, we also had to add a specific import to our src/setupTests.ts
file:
import 'jest-canvas-mock';
Solution 2 - Javascript
You can create your own mock of the function in a jest setup script
HTMLCanvasElement.prototype.getContext = () => {
// return whatever getContext has to return
};
Solution 3 - Javascript
I had similar problem with my Jest tests, and solved it by installing jest-canvas-mock.
Solution 4 - Javascript
Both answers above work. However, just wanted to add that in case of create-react-app, it doesn't support the 'setupFiles' required by jest conf in package.json for jest-canvas-mock.
I got around this by adding the import statement in each of the test files that were invoking the canvas element(in my case 3). Then, I moved the import statement to the setupTests.js file and removed that requirement as well.
Solution 5 - Javascript
I've solved it by installing jest-canvas-mock
npm i --save-dev jest-canvas-mock
And adding this configuration on package.json
{
"jest": {
"setupFiles": [
"jest-canvas-mock"
],
}
}
Solution 6 - Javascript
I experienced the same problem using react-scripts
3.0.1 and solved it by installing jest-canvas-mock
as a dev
dependency and importing it (import 'jest-canvas-mock'
) on my app.test.js file (where I got that error from) only as importing it on setupTests.js
would unnecessarily import the package in every single test file.