我想使用 Jest 和 vue/test-utils 测试文件上传器组件。
我有这个：
describe('show progress bar of uploading file', () => {
const wrapper = mount(FileUploaderComponent)
// create csv file
let csv = new Blob([''], { type: 'text/csv;charset=utf-8;' })
csv.name = 'myFile.csv'
let input = wrapper.find('input')
input.element.value = csv // || csv.error value, Error here
input.trigger('change')
// Update current status
})
在文件上传器组件中我有：
<template>
<form action="POST" enctype="multipart/form-data">
<label class="btn btn-primary" for="input-file">
<input class="input-file" id="input-file" name="file" type="file" accept=".xlsx, .xls, .csv">
UPLOAD FILE
</label>
</form>
</template>
抛出这个错误：
InvalidStateError：此输入元素接受文件名，该文件名可能
只能以编程方式设置为空字符串。
49 |
50 | let input = wrapper.find('input')
> 51 | input.element.value = csv
52 | input.trigger('change')
53 |
54 | // Update current status
所以，问题是：如何用文件输入值触发事件更改？在这种情况下，一个 csv 文件作为值？
您可以使用DataTransfer目的。不幸的是，它还没有被添加到 JSDOM 中，所以你无法在 Jest 中进行测试。有一个添加对象的未决问题 - https://github.com/jsdom/jsdom/issues/1568
如果您使用 Karma 在浏览器中运行测试，则可以像这样进行测试：
const wrapper = shallow(FormComponent)
const input = wrapper.find('input[type="file"]')
const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
dT.items.add(new File(['foo'], 'programmatically_created.txt'))
input.element.files = dT.files
await input.trigger('change')
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
