I can't get the imageCompression() function to work while running jest tests in react

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:

    console.log(file.type, file.size, options);
    const output = await imageCompression(file, options);

The console prints:

  console.log
    image/jpeg 1826515 {
      maxSizeMB: 1,
      maxWidthOrHeight: 1024,
      useWebWorker: false,
      onProgress: [Function: onProgress]
    }

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?

[Donaldcwl]

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.

[jimmythecode]

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?