Javascript 反应单元测试、酶/摩卡测试（或模拟？）html图像api

我已经为我的项目创建了一个组件来帮助加载一些图像。该组件对我来说工作得很好，但是在尝试单元测试时，我在使用html图像api时遇到了一些困难：

首先，我的组件使用

newimage（）在一些图像中加载的语法，下面是组件

import React from 'react';

require('./progressive-image.scss');

export default class ProgressiveImage extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const small = this.refs['small-img'];
    const large = this.refs['large-img'];

    const img = new Image();

    img.src = this.props.smallImg;
    img.onload = function() {
      small.classList.add('loaded');
    };

    const imgLarge = new Image();

    imgLarge.src = this.props.largeImg;
    imgLarge.onload = function() {
      imgLarge.classList.add('loaded');
    };

    large.appendChild(imgLarge);
  }

  componentDidUpdate() {
    const small = this.refs['small-img'];
    const large = this.refs['large-img'];
    const sameImg = large.childNodes[2].src === this.props.largeImg;

    // if loading same img, do nothing
    if (!sameImg) {
      // remove loaded
      small.classList.remove('loaded');

      const img = new Image();

      img.src = this.props.smallImg;
      img.onload = function() {
        small.classList.add('loaded');
      };

      // remove old img
      large.childNodes[2].remove();

      const imgLarge = new Image();

      imgLarge.src = this.props.largeImg;
      imgLarge.onload = function() {
        imgLarge.classList.add('loaded');
      };

      large.appendChild(imgLarge);
    }
  }

  render() {
    const imgStyle = { 'paddingBottom': this.props.heightRatio };

    return (
        <div className="progressive-placeholder" ref="large-img">
          <img className="img-small" ref="small-img" />
          <div style={imgStyle} ></div>
        </div>
    );
  }
}

ProgressiveImage.displayName = 'ProgressiveImage';

ProgressiveImage.propTypes = {
  bgColor: React.PropTypes.string,
  heightRatio: React.PropTypes.string.isRequired,
  largeImg: React.PropTypes.string.isRequired,
  smallImg: React.PropTypes.string.isRequired,
};

然而，测试运行人员却对我大喊大叫，说没有定义
图像
。所以我尝试了类似的方法

    it('should load images on mount', () => {
    global.Image = spy();
    const instance = mount(
          <FollainProgressiveImage
            bgColor={bgColor}
            heightRatio={heightRatio}
            largeImg={largeImg}
            smallImg={smallImg}
            />
      );
  });

也许这需要改变

真的被困在这里，寻找如何测试代码的输入。谢谢
 构造函数是浏览器的一部分，因此不在Node.js中。在浏览器中调用
new Image（）
相当于调用
new window.Image（）
。使用
jsdom
可以设置
global.window
来模拟浏览器的
窗口。这意味着您现在可以访问
window.Image
。如果您想使其在没有
窗口
前缀的情况下可用，则可以将其设置为全局，无需手动设置间谍或模拟。只需将其添加到测试设置中：

global.Image = window.Image;

Image（）
构造函数是浏览器的一部分，因此不在Node.js中。在浏览器中调用
new Image（）
相当于调用
new window.Image（）
。使用
jsdom
可以设置
global.window
来模拟浏览器的
窗口。这意味着您现在可以访问
window.Image
。如果您想使其在没有
窗口
前缀的情况下可用，则可以将其设置为全局，无需手动设置间谍或模拟。只需将其添加到测试设置中：

global.Image = window.Image;

按照安装说明和摩卡咖啡说明为我解决了此问题。
按照安装说明和摩卡咖啡说明为我解决了此问题。
感谢您的解释，这解决了问题，您帮助我了解了问题不起作用的原因！谢谢你的解释，这解决了问题，你帮助我理解为什么它不工作！
global.Image = window.Image;