如何使用模拟更改来测试 FileReader onload？答案

【问题标题】：How to test FileReader onload using simulate change in jest?如何使用模拟更改来测试 FileReader onload？
【发布时间】：2020-08-17 16:32:45
【问题描述】：

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: Illegal invocation。

谁能帮我完成这个单元测试？我只想模拟图像的 src 是否有价值。

【问题讨论】：

我建议您改用URL.createObjectURL。但是当你不再需要它时不要忘记revoke它

标签： javascript reactjs jestjs enzyme

【解决方案1】：

错误的原因是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');

【讨论】：

谢谢@Estus Flask。我对onload 事件有点困惑。所以这里的所有方法和事件都被嘲笑了？能给个参考吗？
onload 只是由 FileReader developer.mozilla.org/en-US/docs/Web/API/FileReader/onload 触发的 load 事件的侦听器。这里测试了组件设置了一个监听器并且它产生了必要的副作用。

【解决方案2】：

在检查一些应该在 FileReader.onload 上调用的副作用时遇到了同样的问题，所以我只是在触发事件后设置了一个短暂的暂停（我使用的是酶 + 玩笑）。设置超时可能不是这里最好的解决方案，但它是唯一有效的方法。

const pauseFor = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
...
wrapper.find('.upload-box').simulate('drop', someMockedDropEvent);
// set pause was the only way to make reader.onload to fire
await pauseFor(100);
expect(something).toEqual(something)

【讨论】：