如何在单元测试中触发FileReader的`onloadend`？
如何在单元测试中触发FileReader的`onloadend`？
提问于 2020-07-06 19:49:04
我正在尝试使用react testing-library测试一个input type=file组件。
该组件是一个标准的<input>元素，具有以下处理图像提交的功能：
export default function ImageUpload(props) {
const { image, setImage } = props;
const handleImageChange = e => {
e.preventDefault();
let reader = new FileReader();
const imageFile = e.target.files[0];
reader.onloadend = () => {
const image = reader.result;
setImage(image);
};
reader.readAsDataURL(imageFile);
};
// etc.
}因为我想模拟图像的上传，所以我这样测试它：
test("ImageUpload shows two buttons after an image has been uploaded", () => {
const setImageSpy = jest.fn();
const image = "data:image/jpeg;base64,/9j/4AAQSkZJ//20==";
const file = new File([image], "chucknorris.jpg", { type: "image/jpeg" });
const readAsDataURL = jest.fn();
const onloadend = jest.fn();
jest.spyOn(global, "FileReader")
.mockImplementation(function() {
this.readAsDataURL = readAsDataURL;
this.onloadend = onloadend;
});
const { getByTestId } = render(
<ImageUpload image={image} setImage={setImageSpy} />
);
fireEvent.change(getByTestId("ImageUpload"), {
target: {
files: [file]
}
});
expect(setImageSpy).toHaveBeenCalledWith(image); // this fails
expect(readAsDataURL).toHaveBeenCalledTimes(1);
expect(readAsDataURL).toHaveBeenCalledWith(file);
});问题是setImageSpy从未被调用过。如果我理解正确的话，这是因为onloadend从不被触发。
如何触发该事件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-14 04:50:27
根据expected behaviour的说法，readAsDataURL模拟应该提供result，而不是存根。
this.onloadend = onloadend在错误的方向上迈出了一步。onloadend不应该被嘲笑，因为它是在测试代码中赋值的。需要在测试中手动调用：
jest.spyOn(global, "FileReader")
.mockImplementation(function() {
this.readAsDataURL = jest.fn(() => this.result = image);
});
...
expect(FileReader).toHaveBeenCalledTimes(1);
const reader = FileReader.mock.instances[0];
expect(reader.readAsDataURL).toHaveBeenCalledTimes(1);
expect(reader.readAsDataURL).toHaveBeenCalledWith(file);
expect(reader.onloadend).toEqual(expect.any(Function));
expect(setImageSpy).not.toHaveBeenCalled();
act(() => reader.onloadend());
expect(setImageSpy).toHaveBeenCalledWith(image);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62755430
复制相关文章
相似问题
腾讯云开发者
