vuejs2 - Cypress 文件上传错误与 cypress-file-upload

Question

在我的 vue/cli 4/Bootstrap 4.3 应用程序中，我使用 vue-upload-component 组件进行文件上传它工作正常。我想添加 cypress 来测试文件上传，我添加 https://github.com/abramenal/cypress-file-upload/tree/v3.5.3进入我的项目，但失败了通过这个测试。我在 vue 文件中:

    <file-upload
            ref="upload"
            v-model="imageFiles"
            post-action="/post.method"
            put-action="/put.method"
            @input-file="inputFile"
            @input-filter="inputFilter"
            :multiple="false"
            class="btn btn-outline-secondary btn-sm m-2 file-input-class"
            data-cy="file-input"
    >
        <i :class="'action_link '+getHeaderIcon('upload')"></i>Upload image
    </file-upload>

    ...
   const VueUploadComponent = require('vue-upload-component')
   Vue.component('file-upload', VueUploadComponent)

在我的浏览器中它被渲染成:

<span class="btn btn-outline-secondary btn-sm m-2 file-input-class file-uploads file-uploads-html5" data-cy="file-input">
    <i class="action_link fa fa-upload"></i>
    Upload image  
    <label for="file"></label> 
    <input type="file" name="file" id="file">
</span>

我做的cypress测试文件:

        import 'cypress-file-upload'
        describe('Admin category fileupload functionality', () => {
            ...
            const fileName = '/sample_images/sample.png';

            cy.contains('Image Preview/Upload')

            cy.fixture(fileName).then(fileContent => {
                //  cy.find('#file')
                //     .should('have.value', 'Invalid Text')

                console.log('++Inside Tests cy::')
                console.log(cy)

                cy.get('#file').upload({ fileContent, fileName, mimeType: 'image/png' });
            });

但是在控制台我得到了错误:

THEN function(){}
TypeError: cy.get(...).upload is not a function

我看到 cy var 的下一个输出:

还在测试上面的代码中取消注释 2 行:

cy.find('#file')
    .should('have.value', 'Invalid Text')

我没有像我预期的那样出现错误，而且我不明白为什么？

如何进行文件上传测试？

"axios": "^0.19.0",
"cypress-file-upload": "^4.0.6",
"file-saver": "^2.0.2",
"vue": "^2.6.10",
"vue-upload-component": "^2.8.20",

谢谢!

Answer 1

您将 "^4.0.6" 显示为您的 cypress-file-upload 版本。 latest version 之间有区别和 version 3.5.3 .

暴露的命令从 upload() 更改为 attachFile() 自版本 4.0.0

在最新版本中还有一个注释说它目前不稳定。也许您应该恢复到 3.5.3 并保持您的代码不变。