gpt4 book ai didi

javascript - React + Jest - 在 IMG 标签上测试 `error` 事件

转载 作者:行者123 更新时间:2023-12-01 19:56:45 25 4
gpt4 key购买 nike

有没有办法触发 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;

以及这个测试套件:

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

最佳答案

我发现 React 的测试实用程序 (React.addons.TestUtils) 非常有用,提供诸如 Simulate (React.addons.TestUtils.Simulate)。在这种情况下,Simulate 就可以解决问题。

来自React's DocumentationTest Utilities :

Simulate an event dispatch on a DOM node with optional eventData event data. This is possibly the single most useful utility in ReactTestUtils.

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

// In this case, we can try to find (again) the tag.
// `TestUtils.findRenderedDOMComponentWithTag` throws an error
// when the provided tag cannot be found.
expect(function() {
TestUtils.findRenderedDOMComponentWithTag(rendered, 'img');
}).toThrow();
});

不过,以下内容可能会偏离主题。可以通过使用状态来改进示例组件。

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

关于javascript - React + Jest - 在 IMG 标签上测试 `error` 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29058211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com