个人中心
gpt4 book ai didi

javascript - React 单元测试、 enzyme /摩卡测试(或模拟？)html 图像 api

转载 作者：行者123 更新时间：2023-12-01 04:01:18 24 4
gpt4 key购买 nike

我为我的项目创建了一个组件来帮助加载一些图像。该组件对我来说工作得很好，但是当尝试进行单元测试时，我在使用 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,
};

使用 enzyme mount 来完全渲染，我正在做类似的事情来对 componentDidMount 进行单元测试(并希望将来能够进行 componentDidupdate)。

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

然而，测试运行者对我大喊图像未定义。所以我尝试了类似的东西

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

那个 spy 是一个 sinon.spy ，但这给了我错误 Node.prototype.appendChild 的第一个参数必须是一个 Node ，但我可以看到覆盖率报告 componentDidMount 正在被命中。

我不确定如何最好地进行测试，我应该完全模拟该对象，还是有更好的方法来做到这一点？

仅供引用 - 我的测试环境设置如下:

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

也许这需要改变？

真的被困在这里，正在寻找有关如何测试此代码的任何输入。谢谢!!

最佳答案

Image() 构造函数是浏览器的一部分，因此不在 Node.js 中。当您在浏览器中调用 new Image() 时，相当于调用 new window.Image()。使用 jsdom，您已设置 global.window 来模拟浏览器的 window。这意味着您现在可以访问 window.Image。如果您想让它在没有 window 前缀的情况下可用，您可以将其设置为全局，无需手动创建 spy 或模拟。只需将其添加到您的测试设置中即可:

global.Image = window.Image;

关于javascript - React 单元测试、 enzyme /摩卡测试(或模拟？)html 图像 api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42164114/

24 4 0
文章推荐： Python - Pymediainfo模块[错误126]找不到指定的模块
文章推荐： Python Selenium 如何从跨度后的 div 中获取文本
文章推荐： Python-sqlalchemy-oracle连接无法连接到SID
文章推荐： javascript - Angular JS 方法 - 一个依赖于另一个的结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com