Jest / Enzyme Image load callback not starting

Question

I have a class component ImageLoaderthat I'm trying to check if a function calls onloadin HTMLImageElement. It is important to note that it ImageLoaderworks as intended, I just can not run the tests. Here is an example of my class:

export default class ImageLoader extends React.Component {
  // Omitted for brevity

  setSrc = () => {
    const { src } = this.props;

    if (src) {
      this.tmpImg = new Image();

      // this.tmpImg.onload is never called
      this.tmpImg.onload = () => console.log('???');

      this.tmpImg.src = src;
    }
  }

  // Omitted for brevity
}

In my test, I left what I am actually testing because I never get into the event onload(this is not console.logwhen tests are executed if I do not call manually this.tmpImg.onload()).

import { mount } from 'enzyme';
import ImageLoader from '../ImageLoader';

describe('ImageLoader', () => {
  it('renders', () => {
    const wrapper = mount(
      <ImageLoader src="A_URL_STRING" />,
    );

    // Omitted for brevity
  });
});

Now, according to this is a question jsdom, got rid of support for this, however by the end of a comment it was said that you can do this with the correct Jest setup.

, onload.

:

  "jest": {
    "testEnvironmentOptions": {
      "resources": "usable"
    }
  },

jsdom .

, Code Sandbox .

, Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

, , , onload.

Answer 1

, .

, canvas "testEnvironmentOptions": { "resources": "usable" }, Jest package.json.