Tengo un componente React para cargar archivos. A continuación se muestra parte del código que maneja la selección de archivos y una vez que se seleccionan los archivos, se mostrarán las miniaturas.

Quiero usar RTL para probar la selección de archivos: al hacer clic en el botón que es EvidenceUploaderPanel , se abre el elemento de entrada del selector de archivos y luego se seleccionan los archivos.

Esto también hará las solicitudes para cargar los archivos a medida que se seleccionan.

Pero no tengo ni idea de cómo empezar.

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