Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

Cypress file uploading error with cypress-file-upload

Hello,

In my vue/cli 4 / Bootstrap 4.3 app I use vue-upload-component component for files uploading and it works ok. I want to add cypress for testing file uploading and I added https://github.com/abramenal/cypress-file-upload/tree/v3.5.3 into my project, but failed with this testing. I have in vue file:


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

and in my browser it is rendered into :

<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>

I cypress test file I do :

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

But in the console I got error:

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

I see next ouput of cy var : https://imgur.com/a/O71JEFA

Also in testing code above to uncomment 2 lines :

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

I do not have should errors, as I expected, asnd I do not understand why ?

How to make file uploading testing?

  "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",

Thanks!

0 likes
1 reply
mstdmstd's avatar

Have anybody uploaded files in cypress? Please, share your expierence...

Please or to participate in this conversation.