How to test file inputs with Cypress?

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress

For me the easier way to do this is using this cypress file upload package

Install it:

npm install --save-dev cypress-file-upload

Then add this line to your project's cypress/support/commands.js:

import 'cypress-file-upload';

Now you can do:

const fixtureFile = 'photo.png';
cy.get('[data-cy="file-input"]').attachFile(fixtureFile);

photo.png must be in cypress/fixtures/

For more examples checkout the Usage section on README of the package.