SimpleDialog.jsx
const [imagePreview, setImagePreview] = React.useState(null);
const handleChangeImage = event => {
let reader = new FileReader();
let file = event.target.files[0];
reader.onload = event => {
console.log(event);
setImagePreview(event.target.result);
};
reader.readAsDataURL(file);
};
return (
<div>
<input
accept="image/*"
id="contained-button-file"
multiple
type="file"
style={{ display: 'none' }}
onChange={handleChangeImage}
/>
<img id="preview" src={imagePreview} />
</div>
);
SimpleDialog.test.js
it('should change image src', () => {
const event = {
target: {
files: [
{
name: 'image.png',
size: 50000,
type: 'image/png'
}
]
}
};
let spy = jest
.spyOn(FileReader.prototype, 'onload')
.mockImplementation(() => null);
wrapper.find('input[type="file"]').simulate('change', event);
expect(spy).toHaveBeenCalled();
expect(wrapper.find('#preview').prop('src')).not.toBeNull();
});
运行测试时,出现错误TypeError:非法调用。
谁可以帮助我进行此单元测试?我只想模拟图像的src是否具有值。
错误的原因是onload
被定义为属性描述符,不支持将其分配给FileReader.prototype
,这是由spyOn`完成的。
没有理由模拟onload
,因为它已在经过测试的代码中分配并且需要进行测试。
简单的方法是不修补JSDOM FileReader
实现,而将其完全存根:
jest.spyOn(global, 'FileReader').mockImplementation(function () {
this.readAsDataURL = jest.fn();
});
wrapper.find('input[type="file"]').simulate('change', event);
let reader = FileReader.mock.instances[0];
expect(reader.readAsDataURL).toHaveBeenCalledWith(...);
expect(reader.onload).toBe(expect.any(Function));
expect(wrapper.find('#preview').prop('src')).toBeNull();
reader.onload({ target: { result: 'foo' } });
expect(wrapper.find('#preview').prop('src')).toBe('foo');