'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