如何測試以編程方式觸發文件輸入的 onClick

Question

我對測試很陌生。 我想測試我的onClick function 是否正常發射。

onClick function 的行為是以編程方式觸發文件輸入。

const Component = () => {

  const onBtnClick = (e: SyntheticEvent) => {
    e.stopPropagation();
    inputFileRef?.current?.click();
  };



  return  (
    <Box data-testid="upload-wrapper">
      <input
        data-testid="upload-input"
        type="file"
        hidden
        ref={inputFileRef}
        onChangeCapture={onFileChangeCapture}
        accept="image/jpeg,image/png,image/jpg"
        tabIndex={-1}
      />

      <Button data-testid="upload-btn" onClick={onBtnClick}>
         Upload image
      </Button>
  )

}

Answer 1

我從react-dropzone測試源文件中找到了解決方案。 至少它適用於我的情況。 這是關於以編程方式打開文件對話框的鏈接react-dropzone@src/index.spec.js 。

我的代碼：

  it('Should open file dialog', () => {
    const onClickSpy = vi.spyOn(HTMLInputElement.prototype, 'click');

    renderScreen({});

    fireEvent.click(screen.getByTestId('image-upload-btn'));

    expect(onClickSpy).toHaveBeenCalled();
  });


  [1]: https://github.com/react-dropzone/react-dropzone/blob/master/src/index.spec.js#L3371