Donaldcwl
commented
2 years ago @jimmythecode Could you provide more information about your React app and the Jest tests. It will be easier to help if you can share code snippets that reproduce the issue.
Closed jimmythecode closed 2 years ago
Donaldcwl
commented
2 years ago @jimmythecode Could you provide more information about your React app and the Jest tests. It will be easier to help if you can share code snippets that reproduce the issue.
jimmythecode
commented
2 years ago Apologies for the omission. Also, worth noting that the compressImageFile function works absolutely fine in production:
imageHandling.test.ts:
describe.only("compressImageFile function", () => {
test("use imageCompression() to compress file", async () => {
// jest.setTimeout(30000);
expect.assertions(4)
const returnFile = await fetchImage(workingUrlLink, "http")
if (typeof returnFile !== "string") {
console.log({
type: returnFile.type,
size: returnFile.size
}) // { type: 'image/jpeg', size: 87664 }
const compressedFile = await compressImageFile(returnFile)
expect(returnFile.type).toBe('image/jpeg');
expect(returnFile.size).toBe(87664);
expect(compressedFile.type).toBe('image/jpeg');
expect(compressedFile.size).toBeLessThan(87664);
}
});
});/imageHandling.ts:
export async function compressImageFile(file: File) {
console.log("input", file); // input File {}
console.log(
"ExifOrientation",
await imageCompression.getExifOrientation(file)
); // ExifOrientation -1
const maxSizeMB = 1
const maxWidthOrHeight = 1024
const options = {
maxSizeMB: maxSizeMB,
maxWidthOrHeight: maxWidthOrHeight,
useWebWorker: true,
onProgress: (p: number) => {console.log(p, new Date().getSeconds(),)}
};
console.log(file.type, file.size, options); // image/jpeg 87664 {maxSizeMB: 1, maxWidthOrHeight: 1024, useWebWorker: true, onProgress: [Function: onProgress]}
const output = await imageCompression(file, options);
console.log("output", output);
return output
}console.log(file.type, file.size, options); // image/jpeg 87664 {maxSizeMB: 1, maxWidthOrHeight: 1024, useWebWorker: true, onProgress: [Function: onProgress]} log. I guess this demonstrates that the browser-image-compressor is working at some level.onProgress: (p: number) => {console.log(p, new Date().getSeconds(),)} as 5 25, again suggesting the browser-image-compressor is working at some level.
I've tried different jest.setTimeout(30000) timers, but they have no effect. The function just seems to stall.
Donaldcwl
commented
2 years ago I guess there are some browser features that were not included in your testing environment such as window.navigator, window.createImageBitmap, window.FileReader, window.File, Image, HTMLCanvasElement etc. I just have a quick look at your jest config, "jest-environment-jsdom-fourteen" seems to be deprecated, you may try to upgrade the jsdom. Hope it helps :)
jimmythecode
commented
2 years ago Thanks for this. I've spent some hours trying to understand how jest works with the dom, but I think I'm actually a good few weeks of practice away before I really get it. I've created a new CRA app with typescript and it's predictably giving me the same errors with the following /package.json set up:
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"browser-image-compression": "^1.0.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",If it's a relatively simple fix, do you know what I'd need to do to make a simple test (eg the original example I gave above) work? Is it a case of needing to mock each method on the window object, or is there a quick fix?
Donaldcwl
commented
2 years ago You may way to have a look at how the test set up of this library here: https://github.com/Donaldcwl/browser-image-compression/blob/master/test/setup_jsdom.js
If you still can't set it up, please share your CRA with me.
When I run a function (which I've got working correctly in codesandbox), in my React app with some Jest tests, the code seems to stall at:
The console prints:
So I think everything is as it should be. The tests keep timing out and it's as if everything gets stuck when I run the imageCompression function. Does anyone know why, or how to fix this?