英文:
cypress-file-upload test the upload functionality with a button inside dropzone component
问题
我使用 react-dropzone 库来处理上传图像文件。现在我想测试这个上传行为。测试是使用 Cypress 编写的，我正在使用 cypress-file-upload。这是我的组件
我尝试遵循这个例子 (https://gist.github.com/ZwaarContrast/00101934954980bcaa4ae70ac9930c60)，但没有使其工作。
<ReactDropzone
onDrop={onDrop}
multiple={false}
noDrag
data-cy="uploadFile"
>
<button className={styles.avatarButton}>
Upload Profile Picture
</button>
</ReactDropzone>
function onDrop(event) {
const file = event[0];
//openModal;
}
在我的测试中，我试图测试模态框是否打开，但在我的情况下模态框并没有打开。
cy.fixture('avatar.png', 'base64').then(fileContent => {
cy.get('[data-cy="uploadFile"]').attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
});
});
cy.get('[data-cy="uploadFile"]')
.find('input').trigger('change', {force:true})
我不确定我在这里做错了什么。我在文件上传时看不到任何模态框。任何帮助将不胜感激。
英文:
I am using react-dropzone library to handle uploading image files. Now I would like to test this upload behaviour. The tests are written using cypress and I am using cypress-file-upload. Here's my component
I tried to follow this example (https://gist.github.com/ZwaarContrast/00101934954980bcaa4ae70ac9930c60) as well, but didn't get it to work .
<ReactDropzone
onDrop={onDrop}
multiple={false}
noDrag
data-cy="uploadFile"
>
<button className={styles.avatarButton}>
Upload Profile Picture
</button>
</ReactDropzone>
function onDrop(event) {
const file = event[0];
//openModal;
}
In my test I'm trying to test if the modal opens up, but the modal doesn't open up in my case.
cy.fixture('avatar.png', 'base64').then(fileContent => {
cy.get('[data-cy="uploadFile"]').attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
});
});
cy.get('[data-cy="uploadFile"]')
.find('input').trigger('change', {force:true})
});
I'm not sure what I'm doing wrong here. I don't see any modal on file upload. Any help would be appreciated.
答案1
得分: 2
> 你不能直接向React组件添加data-id属性并使其出现在DOM内容中。
所以 <ReactDropzone ... data-cy="uploadFile"> 不起作用。
尝试将 data-cy="uploadFile" 添加到内部元素（在你的片段中是 <button>）
我不确定你的确切React代码是什么，因为你展示的部分无法运行，但要获取 <input> 元素，你可以使用Cypress .closest()查询来查找相关联的输入。
cy.fixture('avatar.png', 'base64').then(fileContent => {
cy.get('[data-cy="uploadFile"]')
.closest('input') // <button>最近的输入
.attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
});
});
cy.get('[data-cy="uploadFile"]')
.find('input').trigger('change', {force:true})
});
英文:
Please see Cypress Component Test does not render react Component
> You can't add data-id attributes directly to the the React component and have it appear on the DOM content.
so <ReactDropzone ... data-cy="uploadFile"> does not work.
Try instead adding data-cy="uploadFile" to the inner element (in your snippet it's <button>)
I'm not sure of the exact React code you have, since the piece you show does not run, but to get the <input> element you can use Cypress .closest() query to find the associated input.
cy.fixture('avatar.png', 'base64').then(fileContent => {
cy.get('[data-cy="uploadFile"]')
.closest('input') // nearest input to <button>
.attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
});
});
cy.get('[data-cy="uploadFile"]')
.find('input').trigger('change', {force:true})
});
</details>
# 答案2
**得分**: 0
When using `.attachFile` with a drag'n'drop component, you have to specify it as the `subjectType`.
[From the docs:][1]
```js
cy.get('[data-cy="dropzone"]')
.attachFile('myfixture.json', { subjectType: 'drag-n-drop' });
In your specific case, it would just be adding the additional options object.
cy.get('[data-cy="uploadFile"]').attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
}, {
subjectType: 'drag-n-drop'
});
});
英文:
When using .attachFile with a drag'n'drop component, you have to specify it as the subjectType.
From the docs:
cy.get('[data-cy="dropzone"]')
.attachFile('myfixture.json', { subjectType: 'drag-n-drop' });
In your specific case, it would just be adding the additional options object.
cy.get('[data-cy="uploadFile"]').attachFile({
fileContent: fileContent,
fileName: 'avatar.png',
}, {
subjectType: 'drag-n-drop'
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论