Как использовать toHaveBeenCalled () внутри FileReader.onload

Question

У меня есть компонент, который загружает изображение и отправляет данные изображения в родительский компонент через функцию props.handle Как я могу издеваться или вызывать props.handle внутри fileReader.onload Может быть, нужно использовать async, но я не знаю как.

Была попытка повторить код из этого вопроса Как протестировать `image.onload` с помощью jest в контексте действий с избыточностью (или других обратных вызовов, назначенных в действии) Но это не помогло

ChildComponent.js:

class ChildComponent extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  handleFileLoad = event => {
    event.preventDefault();

    const reader = new FileReader();

    reader.onload = () => {
      const data = reader.result;
      this.props.parentHandleFunction(data)
    }
    reader.readAsDataURL(event.target.files[0]);
  }
}

ChildComponent.propTypes = {
  parentHandleFunction: PropTypes.func.isRequired,
};

ChildComponent.test.js:

describe('<ChildComponent />', () => {
    let renderComponent;
    let changeSpy;
    beforeEach(() => {
     changeSpy = jest.fn(value => value);

    renderComponent = shallow(
      <ChildComponent parentHandleFunction={changeSpy}/>,
    );
  });
    it('should call handle file change', () => {
    const childComponent = shallow(
      renderComponent.find(ChildComponent).getElement(),
    );
    const file = new Blob(['image'], { type: 'image/jpeg' });

    loadButton.find('input').simulate('change', {
      preventDefault: () => {},
      target: {
        files: [file],
      },
    });

    expect(changeSpy).toHaveBeenCalled();
  });
})

Тесты показывают ошибку: «Ожидаемая фиктивная функция была вызвана, но она не была вызвана».

обновление

Я решаю свою проблему, обрезая логику загрузки в отдельной функции

## ChildComponent.js  ##
class ChildComponent extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  loadImage = data => {
    const imageObject = {
      url: data,
    };

    this.props.parentHandleFunction(
      imageObject,
    );
  }
  handleFileLoad = event => {
    event.preventDefault();
    const reader = new FileReader();
    reader.onload = async () => this.loadImage(reader.result);
    reader.readAsDataURL(event.target.files[0]);
  }
}

ChildComponent.propTypes = {
  parentHandleFunction: PropTypes.func.isRequired,
};

ChildComponent.test.js:

it('should call change spy function', () => {
   renderComponent.instance().loadImage('mockImage');

    renderComponent.update();
    renderComponent.instance().forceUpdate(); 
    expect(changeSpy).toHaveBeenCalled();
  });