Mock
canvas
when run unit test cases with jest.
This should only be installed as a development dependency (devDependencies
) as it is only designed for testing.
npm i --save-dev jest-canvas-mock
In your package.json
under the jest
, create a setupFiles
array and add jest-canvas-mock
to the array.
{
"jest": {
"setupFiles": ["jest-canvas-mock"]
}
}
If you already have a setupFiles
attribute you can also append jest-canvas-mock
to the array.
{
"jest": {
"setupFiles": ["./__setups__/other.js", "jest-canvas-mock"]
}
}
More about in configuration section.
Alternatively you can create a new setup file which then requires this module or
add the require
statement to an existing setup file.
__setups__/canvas.js
import 'jest-canvas-mock';
// or
require('jest-canvas-mock');
Add that file to your setupFiles
array:
"jest": {
"setupFiles": [
"./__setups__/canvas.js"
]
}
This mock strategy implements all the canvas functions and actually verifies the parameters. If a
known condition would cause the browser to throw a TypeError
or a DOMException
, it emulates the
error. For instance, the CanvasRenderingContext2D#arc
function will throw a TypeError
if the
radius is negative, or if it was not provided with enough parameters.
expect(() => ctx.arc(1, 2, 3, 4)).toThrow(TypeError);
expect(() => ctx.arc(0, 0, -10, 0, Math.PI * 2)).toThrow(TypeError);
The function will do Number
type coercion and verify the inputs exactly like the browser does. So
this is valid input.
expect(() => ctx.arc("10", "10", "20", "0", "6.14")).not.toThrow();
Another part of the strategy is to validate input types. When using the
CanvasRenderingContext2D#fill
function, if you pass it an invalid fillRule
it will throw a
TypeError
just like the browser does.
expect(() => ctx.fill("invalid!")).toThrow(TypeError);
expect(() => ctx.fill(new Path2D(), "invalid!")).toThrow(TypeError);
We try to follow the ECMAScript specification as closely as possible.
MIT@hustcc.