Search code examples
vue.jsunit-testingjestjsblob

Unit test with jest involving a class instance declared within a vue method


I have this logic for temporarily reading and displaying a profile image:

setTempProfileImage(file) {
      if (file) {
        let reader = new FileReader()
        reader.onload = e => {
          this.generalInfo.profileImage = e.target.result
        }
        reader.readAsDataURL(file)
      }
    }

where file is a BLOB object (which for testing is an 'empty' blob object).

But I'm struggling to write a unit test that checks the onload function call and reader.readDataAsURL(file).

I've got this unit test so far:

let file = new Blob(["testing"], { type: "application/pdf" });
wrapper.vm.setTempProfileImage(file)
wrapper.vm.$nextTick()
console.log(wrapper.vm.profileImage)
expect(wrapper.vm.generalInfo.profileImage).toBe(file)

but it simply reads back as 'undefined'


Solution

  • Estus Flask's link answered my question: https://stackoverflow.com/a/61575553/3731501

    along with this:

    https://zaengle.com/blog/mocking-file-upload-in-vue-with-jest