我有一个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>
);
}
字符串
2条答案
按热度按时间k4emjkb11#
你有没有想过用cypress来做这件事?他们有一个很好的内置功能,可以做你想要的事情,而且设置非常简单。
我建议你使用cypress component testing for react,他们的网站文档上有一整页解释如何设置它。然后你可以直接挂载文件选择组件并使用他们的
cy.selectFile()
方法。祝你好运:)
zrfyljdw2#
在RTL中,只需按照相关步骤即可解决该问题:
1.从RTL导入“用户事件”(
@testing-library/user-event
)1.使用“
new File(['test'], 'test.txt', {type: 'text/plain'})
“创建文件的模拟1.渲染。
1.通过getXXX(如
getByLabel
)中的任何一个抓取文件对象。1.使用“
userEvent.upload(fileObject, file)
“将创建的文件提供给文件对象1.置位“
expect fileObject.files.length.toBe(1)
“