如何测试自定义文件上传 React 组件？答案

【问题标题】：How to test custom file upload React component?如何测试自定义文件上传 React 组件？
【发布时间】：2022-02-08 23:54:24
【问题描述】：

我有一个 React 组件来上传文件。下面是处理文件选择的部分代码，一旦文件被选择，它将显示缩略图。

我想使用 RTL 来测试文件选择：点击按钮 EvidenceUploaderPanel，这将打开文件选择器输入元素，然后选择文件。

这也会在文件被选中时发出上传文件的请求。

但我不知道如何开始。

function UploadScreen({
  title,
  maxNumberOfUploadFiles = 3,
  acceptedFileTypes,
}: Props) {
  const [documents, setDocuments] = useState<FileObject[]>([]);


  const handleFileSelection = (files: FileList) => {

    const documentsWithThumbnails = Array.from(files).map((file) => {
      // here I also make a request to upload each file.
      return {
        file,
        thumbnailURL: URL.createObjectURL(file),
        name: file.name,
      };
    });
    setDocuments((currentDocuments) => [...currentDocuments, ...documentsWithThumbnails]);
  };

  const inputRef = useRef(
    (() => {
      const element = document.createElement('input');
      element.multiple = true;
      element.type = 'file';
      element.accept = acceptedFileTypes?.join(',') || IMAGE_MIME_TYPES.join(',');
      element.addEventListener('change', () => {
        if (element.files && documents.length + element.files.length < maxNumberOfUploadFiles) {
          handleFileSelection(element.files);
          element.value = '';
        }
      });

      return element;
    })(),
  );


  const handleOpenFileClicker = () => {
    inputRef.current.click();
  };

  return (
    <div>
      <h2 className="container">{title}</h2>
       {documents.length > 0 ? (
        <section>
          <div className="body-text">
           Add files
          </div>
          <div className="thumbnail-container">
            {documents.map((doc) => {
              return (
                <BaseThumbnail
                  src={doc?.thumbnailURL}
                  key={doc.name}
                  deleteAction={() => {
                    deleteDocument(doc.name);
                  }}
                />
              );
            })}
          </div>
          <Link onPress={handleOpenFileClicker}>
            Add photos
          </Link>
        </section>
      ) : (
        <section>
          <div className="text">
            Add files
          </div>
          <div className="upload-container" />
          <EvidenceUploaderPanel
            labelText="upload files"
            openFilePicker={handleOpenFileClicker}
          />
        </section>
       )}
    </div>
  );
}

【问题讨论】：

我认为检查文件选择的功能没有任何意义——它是基于浏览器的，它可以工作。至于发送功能，可以勾选，但要考虑mock。首先，问问自己，通过 +1 测试以外的测试来检查你会得到什么。

标签： javascript reactjs jestjs react-testing-library

【解决方案1】：

您是否考虑过为此使用cypress？它们有一个很好的内置功能，可以完全满足您的需求，而且设置非常简单。

我建议您使用cypress component testing for react，他们在其网站的文档中有一整页解释了如何设置它。而且你可以只挂载文件选择组件并使用他们的cy.selectFile() 方法。

祝你好运:)

【讨论】：