Question

如果正在调用ImageLoader上的onload函数，我有一个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，除非我手动调用{ {1}}）。

this.tmpImg.onload()

现在根据this问题import { mount } from 'enzyme'; import ImageLoader from '../ImageLoader'; describe('ImageLoader', () => { it('renders', () => { const wrapper = mount( <ImageLoader src="A_URL_STRING" />, ); // Omitted for brevity }); });已经摆脱了对此的支持，但是最后还是comment说你可以使用正确的Jest设置来做到这一点。< / p>

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

以下是设置：

onload

同样在"jest": { "testEnvironmentOptions": { "resources": "usable" } },存储库中，它讨论了加载子资源here。

更新

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

如果我下载并在本地运行，我会得到jsdom

有一点需要注意的是，我将图像转换为承诺，然后在调用Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.时解析该承诺。

Answer 1

好的，由于安德鲁的上述评论，我想出了这一切。

要在本地开展此项工作，您必须在"testEnvironmentOptions": { "resources": "usable" },的Jest部分安装canvas个软件包并设置package.json。

Answer 2

如果由于某种原因您不能使用上述软件包，则可以覆盖window.Image()。更改代码以使用window.Image()构造函数，则以下各项将起作用：

ImageLoader：

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
    });
});

显然这并不完美（每次都会加载），但是如果您只是想测试自己是否正确设置了回调函数，那么它就可以正常工作。

没有运行Jest / Enzyme Image onload回调

2 个答案: