Why is my jest test failing for URL.createObjectURL?

Question

I have two unit tests like so:

test('should call downloadPDFFile with msSaveOrOpenBlob when the navigator is present', async () => {
  axios.get.mockResolvedValueOnce({ data: 'blob' });
  window.navigator.msSaveOrOpenBlob = () => true;
  const msSaveOrOpenBlobSpy = jest.spyOn(window.navigator, 'msSaveOrOpenBlob');
  await downloadPDFFile('www.pokebook/{+asset_path}', 'squirtle', '123', false);
  expect(msSaveOrOpenBlobSpy).toHaveBeenCalledWith('blob', 'squirtle.pdf');
});

test('should call downloadPDFFile with createObjectURL when the navigator is not present', async () => {
  axios.get.mockResolvedValueOnce({ data: 'blob' });
  window.URL.createObjectURL = () => 'www.pokeball.com';
  console.log(window.navigator);
  const urlCreateObjectSpy = jest.spyOn(window.URL, 'createObjectURL');
  await downloadPDFFile('www.pokebook/{+asset_path}', 'charmander', '123', false);
  expect(urlCreateObjectSpy).toHaveBeenCalledWith('blob');
});

And after reading many posts, it seems like window.URL.createObjectURL = () => {}; should work, however, I keep running into this test failure message on the second one:

expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "blob"

    Number of calls: 0

      557 |             const urlCreateObjectSpy = jest.spyOn(window.URL, 'createObjectURL');
      558 |             await downloadPDFFile('www.pokebook/{+asset_path}', 'charmander', '123', false);
    > 559 |             expect(urlCreateObjectSpy).toHaveBeenCalledWith('blob');
          |                                        ^
      560 |         });
      561 |     });
      562 | });

Here is the function being tested:

const downloadPDFFile = (urlTemplate, name, readToken, isWatermarked) => {
  const config = { responseType: "blob" };
  const pdfFileName = `${name.split(".")[0]}.pdf`;
  let formattedUrl;

  if (isWatermarked) {
    formattedUrl = urlTemplate.replace("{+temp}?", `?token=${readToken}&`);
  } else {
    formattedUrl = urlTemplate.replace("{+temp}", `?token=${readToken}`);
  }

  axios.get(formattedUrl, config).then((response) => {
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(response.data, pdfFileName);
    } else {
      const anchor = document.createElement("a");
      anchor.download = pdfFileName;
      anchor.href = URL.createObjectURL(response.data);
      document.body.appendChild(anchor);
      anchor.click();
      document.body.removeChild(anchor);
    }
  });
};

Am I missing some kind of a cleanup step in between tests? (the console.log in the second test shows that the window.navigator object is actually defined, which I suspect is why I'm getting strange behavior)

Sorry, could you please re-add the bit of code this is testing? — Phil, Jul 28 '22 at 03:38
Thank you for the edit! Apparently formatting code on a phone is more difficult than I thought — user18971245, Jul 28 '22 at 03:45
Does it make a difference if your code uses `window.URL.createObjectURL` instead of `URL.createObjectURL`? — Phil, Jul 28 '22 at 03:50
@Phil Updated my question above! I think I'm missing some kind of a cleanup step... — user18971245, Jul 29 '22 at 02:03
I'd say so. You should probably delete `window.navigator.msSaveOrOpenBlob` after that first test runs — Phil, Jul 29 '22 at 02:06

score 1 · Answer 1 · answered Jul 28 '22 at 03:50

This is happening because you don't return axios.get().then(), so downloadPDFFile() returns undefined and await has no effect, leading to expect(urlCreateObjectSpy).toHaveBeenCalledWith("blob"); being called before anchor.href = URL.createObjectURL(response.data);

Just update this line to add return

  return axios.get(formattedUrl, config).then((response) => {

Alternatively, you can make the function asynchronous

const downloadPDFFile = async (urlTemplate, name, readToken, isWatermarked) => {

and then use the await syntax

  const response = await axios.get(formattedUrl, config);
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(response.data, pdfFileName);
  } else {
    const anchor = document.createElement("a");
    anchor.download = pdfFileName;
    anchor.href = URL.createObjectURL(response.data);
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
  }

Hm, tried both ways and I still got the `Number of calls: 0` failure message. Do I also need to change something in the unit test?? — user18971245, Jul 28 '22 at 16:59
I updated my question above! It seems like I'm missing a cleanup step somewhere.. — user18971245, Jul 29 '22 at 02:04

score 0 · Accepted Answer · answered Jul 31 '22 at 04:59

0

It turned out that I was forgetting to do a cleanup step after my previous test; in my first test I set window.navigator.msSaveOrOpenBlob which is what I wanted/expected. But this carried over into the second test which caused unexpected results.

answered Jul 31 '22 at 04:59

user18971245

27
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 02 '22 at 06:28

Why is my jest test failing for URL.createObjectURL?

2 Answers2