Как я могу издеваться над FileReader с шуткой? - PullRequest
Новая
       18

Как я могу издеваться над FileReader с шуткой?

1 голос
/ 11 октября 2019

Последние пару недель я боролся с юнит-тестированием компонента реакции на загрузку файлов с помощью jest. В частности, я пытаюсь проверить, вызывается ли метод onReadAsDataUrl из FileReader в одном из моих методов. Это пример метода, который я тестирую: 

loadFinalImage = async (file) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    this.setState({
      imagePreviewUrl: reader.result,
      validCard: true,
    });
  };
  await reader.readAsDataURL(file);
}

Вот как я пытаюсь смоделировать FileReader и проверить, был ли вызван onReadAsDataUrl: 

it('is a valid image and reader.onReadAsDataUrl was called', () => {
    const file = new Blob(['a'.repeat(1)], { type: 'image/png' });
    wrapper = shallow(<ImageUpload />).dive();
    const wrapperInstance = wrapper.instance();
    const mockReader = jest.fn();
    jest.spyOn('FileReader', () => jest.fn());
    FileReader.mockImplementation(() => { return mockReader });
    const onReadAsDataUrl = jest.spyOn(mockReader, 'readAsDataURL');
    wrapperInstance.loadFinalImage(file);
    expect(onReadAsDataUrl).toHaveBeenCalled();
  });

После того, как я запустил:yarn jest, я получаю следующий тестовый сбой:

Невозможно шпионить за примитивным значением;заданная строка.

Я предполагаю, что получаю эту ошибку, потому что я не импортирую FileReader, но я не совсем уверен, как импортировать или высмеивать его, потому что FileReader является интерфейсом. Вот изображение неудачного теста: enter image description here

Я немного новичок с шутками, реагированием и веб-разработкой, но хотел бы узнать, как справиться с этой проблемой,Некоторые ресурсы, на которые я смотрел до сих пор: Unresolved Shopify Mock of FileReader , Как смоделировать новую функцию в jest , и Mocking FileReader с помощью jasmine .

Любая помощь будет принята с благодарностью! Заранее спасибо.

...