Javascript 反应+；Jest-在IMG标记上测试'error'事件

有没有办法触发

img

标记的

error

事件来测试我的

onError

回调？比如说这个组件,

import React from 'react';

/**
 * Self removing <img> when the `src` or image
 * does not load or is unavailable.
 *
 * Usage: (tip: it's how you use the <img> tag, basically)
 * <Img src={} alt={} ../..>
 */
var Img = React.createClass({
  /**
   * Force update so `refs` will be available
   */
  componentDidMount() {
    this.forceUpdate();
  },

  render() {
    // Omit any passed `onError` prop so that
    // it is never overridden by mistake
    var { onError, ...other } = this.props;

    return (
      <span ref="container">
        <img {...other} onError={this._handleError} />
      </span>
    )
  },

  /**
   * Remove itself when image is not found
   */
  _handleError() {
    this.refs.container.getDOMNode().remove();
  }
});

export default Img;

从“React”导入React；
/**
*自动移除标签（基本上）
* 
*/
var Img=React.createClass({
/**
*强制更新，以便“refs”可用
*/
componentDidMount（）{
这个.forceUpdate（）；
},
render（）{
//省略任何通过的'onError'道具，以便
//它永远不会被错误推翻
var{onError，…other}=this.props；
返回(
)
},
/**
*当找不到图像时删除自身
*/
_handleError（）{
this.refs.container.getDOMNode（）.remove（）；
}
});
导出默认Img；

这个测试套件：

it('should remove itself when an error occurs while loading the image', function() {
  // rendered = TestUtils.renderIntoDocument(<Img />);
});

import React from 'react';

/**
 * Self removing <img> when the `src` or image
 * does not load or is unavailable.
 *
 * Usage: (tip: it's how you use the <img> tag, basically)
 * <Img src={} alt={} ../..>
 */
var Img = React.createClass({
  // We'll set `error` to false to load and display the image,
  // only will it be true when an error occurs
  getInitialState() { 
    return { error: false }
  },

  render() {
    // Omit any passed `onError` prop so that
    // it is never overridden by mistake
    var { onError, ...other } = this.props;

    return !this.state.error ? (
      <span>
        <img {...other} onError={this._handleError} />
      </span>
    ) : null;
  },

  /**
   * Set `state` error to true to remove the
   * the dom nodes themselves
   */
  _handleError() {
    this.setState({ error: true });
  }
});

export default Img;

it（'加载图像时出错时应自行删除'，函数（）{
//rendered=TestUtils.renderIntoDocument（）；
});

我发现React的测试实用程序（

React.addons.TestUtils

）非常有用，提供了类似于

Simulate

（

React.addons.TestUtils.Simulate

）的实用程序。在这种情况下，

Simulate

就可以了

从那时起：

使用可选的eventData事件数据在DOM节点上模拟事件调度。这可能是ReactTestUtils中最有用的一个实用程序

然后使用以下测试套件：

it('should remove itself when an error occurs while loading the image', function() {
  // rendered = TestUtils.renderIntoDocument(<Img />);
});

import React from 'react';

/**
 * Self removing <img> when the `src` or image
 * does not load or is unavailable.
 *
 * Usage: (tip: it's how you use the <img> tag, basically)
 * <Img src={} alt={} ../..>
 */
var Img = React.createClass({
  // We'll set `error` to false to load and display the image,
  // only will it be true when an error occurs
  getInitialState() { 
    return { error: false }
  },

  render() {
    // Omit any passed `onError` prop so that
    // it is never overridden by mistake
    var { onError, ...other } = this.props;

    return !this.state.error ? (
      <span>
        <img {...other} onError={this._handleError} />
      </span>
    ) : null;
  },

  /**
   * Set `state` error to true to remove the
   * the dom nodes themselves
   */
  _handleError() {
    this.setState({ error: true });
  }
});

export default Img;

it（'当图像加载时出现错误，应将其自身删除'，函数（）{
var rendered=TestUtils.renderIntoDocument（）；
var img=TestUtils.findrenderedomcomponentwithtag（呈现为'img'）；
TestUtils.Simulate.error（img）；
//当“FindRenderedomComponentWithTag”没有结果时，
//它抛出一个错误“没有找到与标记img完全匹配的项”
expect（函数（）{
TestUtils.findRenderedomComponentWithTag（呈现为“img”）
}).toThrow（'没有找到标签：img的精确匹配项'）；
expect（rendered.state.error）.toBe（true）；
});

使用jest和react测试库非常简单

在实际代码中，我们正在侦听onError事件

it('should remove itself when an the image loads with an error', function() {
  var rendered = TestUtils.renderIntoDocument(<Img />);
  var img = TestUtils.findRenderedDOMComponentWithTag(rendered, 'img');
  TestUtils.Simulate.error(img);

  // When no results come out of `findRenderedDOMComponentWithTag`,
  // it throws an error 'Did not find exactly one match for tag:img'
  expect(function() {
    TestUtils.findRenderedDOMComponentWithTag(rendered, 'img')
  }).toThrow('Did not find exactly one match for tag:img');
  expect(rendered.state.error).toBe(true);
});

const handleimgeror=（e）=>{
e、 target.src=https://default-placehodler-image-path.svg';
};

在测试代码中

const handleImgError = (e) => {
  e.target.src = 'https://default-placehodler-image-path.svg';
};

<img
  src='http://4040.jpg'
  onError={handleImgError}
/>

从'@testing library/react'导入{render，waitFor，firevent}；
const{container}=render（）；
//获取img元素
const imgEl=container.querySelector（'img'）；
//在元素上模拟错误事件
fireEvent.error（imgEl{
目标：imgEl，
});
//预期img元素的更新更改
等待等待（（）=>{
expect（imgEl.src）.toEqual(
'https://default-placehodler-image-path.svg'
);
});