Categories
enzyme jestjs reactjs unit-testing

How do you use Jest to test img.onerror

I’ve created a React component that loads an image and determines if the image loaded successfully or not.

import React from 'react';
import PropTypes from 'prop-types';
import { LOADING, SUCCESS, ERROR } from '../helpers';
class Image extends React.Component {
static propTypes = {
onError: PropTypes.func,
onLoad: PropTypes.func,
src: PropTypes.string.isRequired,
}
static defaultProps = {
onError: null,
onLoad: null,
}
constructor(props) {
super(props);
this.state = { imageStatus: LOADING };
this.initImage();
}
componentDidMount() {
this.image.onload = this.handleImageLoad;
this.image.onerror = this.handleImageError;
this.image.src = this.props.src;
}
initImage() {
this.image = document.createElement('img');
this.handleImageLoad = this.handleImageLoad.bind(this);
this.handleImageError = this.handleImageError.bind(this);
}
handleImageLoad(ev) {
this.setState({ imageStatus: SUCCESS });
if (this.props.onLoad) this.props.onLoad(ev);
}
handleImageError(ev) {
this.setState({ imageStatus: ERROR });
if (this.props.onError) this.props.onError(ev);
}
render() {
switch (this.state.imageStatus) {
case LOADING:
return this.renderLoading();
case SUCCESS:
return this.renderSuccess();
case ERROR:
return this.renderError();
default:
throw new Error('unknown value for this.state.imageStatus');
}
}
}
export default Image;

I’m trying to create a test using Jest + Enzyme to test when an image fails to load.

  it('should call any passed in onError after an image load error', () => {
const onError = jest.fn();
mount(<Image {...props} src="https://www.faqcode4u.com/faq/80650/crap.junk"} onError={onError} />);
expect(onError).toHaveBeenCalled();
});

No matter what I do, Jest always finds a way to successfully render the image. Even setting src to false still renders an image somehow. Does anyone know how in the heck you can force jest to fail an image load?