反應單元測試，酶/摩卡測試（或模擬？）html image api

Question

我為我的項目創建了一個組件，以幫助加載一些圖像。 該組件對我來說很棒，但是當嘗試進行單元測試時，使用html Image api遇到了一些困難：

首先，我的組件正在使用new Image(); 加載某些圖像的語法，這是組件

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

使用酶mount來完全渲染，我正在做類似的事情來對componentDidMount進行單元測試（並希望在將來對componentdidupdate進行單元測試）。

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

但是，測試賽跑者對我大喊： Image is not defined 。 所以我嘗試了類似的東西

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

那個間諜是sinon.spy ，但是這給了我First argument to Node.prototype.appendChild must be a Node的First argument to Node.prototype.appendChild must be a Node的錯誤，但是我在覆蓋率報告中可以看到componentDidMount被命中了。

我不確定如何最好地測試此方法，我應該完全模擬該對象，還是有更好的方法來執行此操作？

僅供參考-我的測試環境設置如下：

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = {userAgent: 'node.js'};

也許這需要改變？

真的卡在這里，尋找有關如何測試此代碼的任何輸入。 謝謝！！

Answer 1

Image()構造函數是瀏覽器的一部分，因此不在Node.js中。 在瀏覽器中調用new Image() ，等效於調用new window.Image() 。 使用jsdom您可以設置global.window來模擬瀏覽器的window 。 這意味着您現在可以訪問window.Image 。 如果要在不使用window前綴的情況下使其可用，則可以將其設置為全局，而無需手動進行間諜或模擬。 只需將其添加到您的測試設置中：

global.Image = window.Image;

Answer 2

按照global-jsdom的安裝和Mocha指示為我解決了此問題。

反應單元測試，酶/摩卡測試（或模擬？）html image api

問題描述

2 個解決方案

解決方案1
2 已采納 2017-02-16 14:04:47

解決方案2
0 2018-01-30 22:36:56

反應單元測試，酶/摩卡測試（或模擬？）html image api

問題描述

2 個解決方案

解決方案1 2 已采納 2017-02-16 14:04:47

解決方案2 0 2018-01-30 22:36:56

解決方案1
2 已采納 2017-02-16 14:04:47

解決方案2
0 2018-01-30 22:36:56