Как проверить загрузку FileReader, используя симуляцию изменений в jest? - PullRequest
Новая
       14

Как проверить загрузку FileReader, используя симуляцию изменений в jest?

1 голос
/ 03 мая 2020

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

При запуске теста выдается ошибка Ошибка типа: недопустимый вызов .

Кто-нибудь может мне помочь с этим модульным тестом? Я просто хочу смоделировать изменения, если sr c изображения имеет значение или нет.

1 Ответ

1 голос
/ 03 мая 2020

Причиной ошибки является то, что 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');
...