Testing nested functions that call Promises in Jest - reactjs

Question

I've been tasked with testing some pretty heavy duty functions and unfortunately I have no idea where to start with this one.
The function in question is this one:
export async function getCroppedImg(imageSrc, pixelCrop) {
const image = await createImage(imageSrc);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// set width to double image size to allow for a safe area for the
// image to rotate in without being clipped by canvas context
canvas.width = image.width * 2;
canvas.height = image.height * 2;
// translate canvas context to a central location to allow rotating around the center.
ctx.translate(image.width, image.height);
ctx.translate(-image.width, -image.height);
// draw rotated image and store data.
ctx.drawImage(image, image.width / 2, image.height / 2);
const data = ctx.getImageData(0, 0, image.width * 2, image.height * 2);
// set canvas width to final desired crop size - this will clear existing context
canvas.width = pixelCrop.width;
canvas.height = pixelCrop.height;
// paste generated rotate image with correct offsets for x,y crop values.
ctx.putImageData(data, 0 - image.width / 2 - pixelCrop.x, 0 - image.height / 2 - pixelCrop.y);
// As Base64 string
// return canvas.toDataURL('image/jpeg');
// As a blob
const preview = new Promise(resolve => {
canvas.toBlob(file => {
resolve(URL.createObjectURL(file));
}, "image/jpeg");
});
const base64String = canvas.toDataURL();
return Promise.all([preview, base64String]);
}
The other function called in this one is the createImage function that looks like this:
export const createImage = url =>
new Promise((resolve, reject) => {
const image = new Image();
image.addEventListener("load", () => resolve(image));
image.addEventListener("error", error => reject(error));
image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on CodeSandbox
image.src = url;
});
This has already been tested to 100% coverage so I know I've got to mock it to test the getCroppedImage function but I haven't got a clue where to start with this one...

Answer 1

You can consider spying on createImage and mock the response as a resolved promise.
const spy = jest.spyOn(yourMockedModule, 'createImage').mockImplementation(() => Promise.resolve(....));