If your application is using the browser FileSystem APIs the tests can stub those window
methods to return mock data. For example, the following application from the repo bahmutov/cypress-browser-file-system-example shows the contents of the file selected by the user:
let fileHandle
// Destructure the one-element array.
;[fileHandle] = await window.showOpenFilePicker()
const file = await fileHandle.getFile()
const contents = await file.text()
document.getElementById('output').textContent = contents
From the Cypress test, stub the method itself and return mock objects all the way down to file.text
method:
cy.visit('/', {
onBeforeLoad(win) {
const file = {
text: cy.stub().resolves('Hello, world!'),
}
const fileHandle = {
getFile: cy.stub().resolves(file),
}
cy.stub(win, 'showOpenFilePicker')
.resolves([fileHandle])
},
})
Once the method is stubbed, we can check the user interface
cy.get('button').click()
cy.get('#output').should('have.text', 'Hello, world!')
cy.get('@text').should('be.called')
The test gives us confidence in our code
For the full discussion, read the new blog post “Test Web Apps That Use The Browser FileSystem API”