没有运行Jest/Enzyme Image onload回调

Question

我有一个ImageLoader类组件,我试图测试是否正在调用onloada上的函数HTMLImageElement.重要的是要注意ImageLoader按预期工作,我只是无法让测试运行.这是我的类组件的示例:

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
}

对于我的测试,我遗漏了我实际测试的内容,因为我从未实际进入过该onload事件(console.log除非我手动调用,否则它不会在测试运行时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
  });
});

现在根据这个问题jsdom已经摆脱了对它的支持,但是最后一条评论留下说你可以用正确的Jest设置来做到这一点.

我已经添加到我的设置但仍然无法onload触发事件.

这是设置:

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

同样在jsdom存储库中,它讨论了在这里加载子资源.

更新

是什么驱使我更加疯狂的是,我可以在代码中创建沙盒测试在这里,它通过了所有测试.

如果我下载它并在本地运行它我会得到一个 Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

有一点需要注意的是,我将图像转换为承诺,然后onload在调用时解析该承诺.

Answer 1

好的，由于安德鲁在上面的评论，我把这一切都弄清楚了。

为了使本地这项工作，你必须有帆布安装包"testEnvironmentOptions": { "resources": "usable" },中的的玩笑部分设置package.json。