Как протестировать реагирующий компонент на основе событий чтения файлов - PullRequest
Новая
       20

Как протестировать реагирующий компонент на основе событий чтения файлов

0 голосов
/ 10 июля 2019

У меня есть компонент реагирования, называемый FileReader, основанный на компоненте реагирования Dropzone (https://github.com/react-dropzone/react-dropzone).. Эта программа чтения файлов вызывает ловушку обратного вызова при удалении файла на элемент ввода FileReader, который выглядит следующим образом: 

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useDropzone } from 'react-dropzone';

function FilePicker(props) {
  const { fileName, setFile, setFileName } = props;

  const onDrop = useCallback((acceptedFiles) => {
    const reader = new FileReader();

    reader.onload = () => {
      const binaryFile = reader.result;
      setFile(binaryFile);
    };

    acceptedFiles.forEach((file) => {
      setFileName(file.name);
      return reader.readAsBinaryString(file);
    });
  }, [setFile, setFileName]);
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div data-testid="file-picker" id="file-picker" {...getRootProps()}>
      <div className="container-fluid inherit-height">
        <input data-testid="file-picker-input" {...getInputProps()} />
        <div className="row align-content-center inherit-height">
          <p data-testid={fileName} className="text-center" id="file-picker-title">
            {fileName !== '' ? fileName : 'Drag n drop a file here, or click to select file' }
          </p>
        </div>
      </div>
    </div>
  );
}

FilePicker.propTypes = {
  fileName: PropTypes.string.isRequired,
  setFile: PropTypes.func.isRequired,
  setFileName: PropTypes.func.isRequired,
};

export default FilePicker;

Теперь я пытаюсь протестировать этот компонент таким образом, чтобы я мог проверить, правильно ли были вызваны функции setFile и setFileName. Мой тестовый файл выглядит так: 

import React from 'react';
import { render, cleanup, fireEvent, act } from '@testing-library/react';
import 'jest-dom/extend-expect';
import FileReader from './__mocks__/FileReader';
import FilePicker from './FilePicker';

afterEach(cleanup);

describe('React Use S3 Demo', () => {
  it('should render file picker', () => {
    const mockedFileName = '';
    const mockedSetFile = jest.fn();
    const mockedSetFileName = jest.fn();

    const { rerender, getByTestId, debug } = render(
      <FilePicker
        fileName={mockedFileName}
        setFile={mockedSetFile}
        setFileName={mockedSetFileName}
      />,
    );

    const filePicker = getByTestId('file-picker-input');

    act(() => {
      fireEvent.drop(filePicker, {
        target: {
          files: [new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })],
        },
      });
    });

    expect(mockedSetFileName).toHaveBeenCalled();
    expect(mockedSetFile).toHaveBeenCalled();
  });
});

На первый взгляд кажется, что это будет работать, но на самом деле это не так, поскольку компонент FileReader, похоже, не вызывает две функции, которые работают как подпорки. Я попытался использовать функцию rerender из '@ testing-library / реаги', но это тоже не помогло. Как бы вы провели тестирование FileReader для проверки ваших тестов при вызове функций setFile и setFileName?

Спасибо!

...