如何在FileReader.onload中使用toHaveBeenCalled（）

Question

我有一个组件来加载图像，并通过props.handle函数将图像数据发送到父组件 我如何在fileReader.onload中模拟或调用props.handle 也许需要使用异步，但我不知道如何。

请尝试从该问题How do I test `image.onload` using jest in the context of redux actions (or other callbacks assigned in the action)重复代码 但这没有帮助

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

测试显示错误： “预期的模拟函数已被调用，但未被调用。”

更新

我通过在单独的函数中削减onload逻辑来解决我的问题

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