Jest/Enzyme Image onload 回调未运行答案

【问题标题】：Jest/Enzyme Image onload callback not being ranJest/Enzyme Image onload 回调未运行
【发布时间】：2018-09-03 05:56:47
【问题描述】：

我有一个 ImageLoader 类组件，我正在尝试测试是否正在调用 HTMLImageElement 上的 onload 函数。重要的是要注意 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 事件（除非我手动调用this.tmpImg.onload()，否则在测试运行时它不会console.log）。

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

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

    // Omitted for brevity
  });
});

现在根据this 是问题jsdom 已经摆脱了对此的支持，但最后留下了comment 说你可以通过正确的 Jest 设置来做到这一点。

我已将其添加到我的设置中，但仍然无法触发 onload 事件。

这是设置：

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

同样在jsdom 存储库中，它谈到了加载子资源here。

更新

更让我抓狂的是，我可以在 Code Sandbox here 中创建测试并且它通过了所有测试。

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

需要注意的一点是，我将创建图像转移到一个承诺中，然后在调用 onload 时解决该承诺。

【问题讨论】：

1.你是否也安装了canvas 或canvas-prebuilt 包？ 2. 另外，为什么不通过enzymes simulate手动触发load事件？
你是对的@AndrewMiroshnichenko，我需要将 canvas 包添加为开发依赖项。

标签： javascript reactjs jestjs enzyme jsdom

【解决方案1】：

如果由于某种原因你不能使用上面的包，你可以覆盖window.Image()。更改代码以使用window.Image() 构造函数，然后以下将起作用：

图像加载器：

export default class ImageLoader extends React.Component {

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

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

      this.tmpImg.onload = () => console.log('bimpson');

      this.tmpImg.src = src;
    }
  }

}

测试：

describe('ImageLoader', () => {
    const mockImage = {
        src: null,
        onload: () => {},
        onerror: () => {}
    };

    beforeEach(() => {
        window.Image = function() { return mockImage }
    });

    it("Loads a data url into an image element", (done) => {
        const wrapper = mount(
          <ImageLoader src="A_URL_STRING" />,
        );

        // Call onload or onerror to trigger the desired behaviour
        mockImage.onload();

        // Test for your expected behaviour after onload is called here
    });
});

显然它并不完美（每次都会加载），但如果你只是想测试你是否正确设置了回调，那么它工作正常。

【讨论】：

【解决方案2】：

好的，感谢安德鲁上面的评论，我明白了。

要在本地完成这项工作，您必须在 package.json 的 Jest 部分安装 canvas 软件包和 "testEnvironmentOptions": { "resources": "usable" }, 设置。

【讨论】：