'How to test a file upload with jest depending on the type?
I'm trying to learn about jest.
I have un application to upload files. The script check if file is an image or not based on the first bytes. I try to test this script but it doesn't work....
Here is a part of application :
loadMimeType (header) {
switch (header) {
case "89504e47":
return true
case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
case "ffd8ffe3":
case "ffd8ffe8":
return true
default:
return false
}
}
handleChangeFile = e => {
//console.log("e", e.target.result)
e.preventDefault()
const file = this.document.querySelector(`input[data-testid="file"]`).files[0]
const blob = file
const fileReader = new FileReader()
fileReader.onloadend = (e) => {
const arr = (new Uint8Array(e.target.result)).subarray(0, 4)
//console.log(arr)
let header = ""
for(let i = 0; i < arr.length; i++) {
header += arr[i].toString(16)
}
//console.log(this.loadMimeType(header))
if (!this.loadMimeType(header)){
this.document.querySelector(`input[data-testid="file"]`).value = null
//console.log(alert)
alert('fichier non valide (jpg jpeg png)')
return ;
}
}
And this is the test :
describe("When I upload a file", () => {
test ("It is a uncorrect txt file, the pop up should be open", () => {
const response = fs.readFileSync(__dirname+'/FileTest.txt')
//console.log(...response)
const alertMock = jest.fn((message)=> console.log(message))
Object.defineProperty(window, 'alert', { value: alertMock })
Object.defineProperty(window, 'localStorage', { value: localStorageMock })
window.localStorage.setItem('user', JSON.stringify({
email: '[email protected]',
type: 'employee'
}))
const root = document.createElement("div")
root.setAttribute("id", "root")
document.body.append(root)
router()
const onNavigate = (pathname) => {window.onNavigate(pathname)}
document.body.innerHTML = NewBillUI()
const newBill = new NewBill({ document, onNavigate, store:storeMock, localStorage:localStorageMock })
newBill.handleChangeFile = jest.fn()
const inputFile = screen.getByTestId("file")
const fileTest = new File([response], 'test.txt', {
type: "text/plain",
})
fireEvent.change(inputFile, {
target: {files:[fileTest]}
})
setTimeout(() => {
expect(alertMock).toHaveBeenCalled()
//test, qwerty doesn't exist => no error, console.log isn't showing
expect(qwerty).toBeRequired()
console.log("except")
}, 1000)
})
})
the first part of the test is to log into the application and create and create the necessary variables.
At runtime, no problem but console.log doesn't appear so I think timeout is never executed... If expect is outside timeout test fails, I think it was because upload and check file takes a little time ?
What's the problem ? How can I test this function ?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
