Jest URL.createObjectURL is not a function

Question

I'm developping a reactJs application. I'm using jest to test my application. I want to test a function that download a blob.

But unfortunately I receve this error:

URL.createObjectURL is not a function

my test function:

describe('download', () => {
    const documentIntial = { content: 'aaa' };
    it('msSaveOrOpenBlob should not have been called when navigao is undefined', () => {
      window.navigator.msSaveOrOpenBlob = null;
      download(documentIntial);
      expect(window.navigator.msSaveOrOpenBlob).toHaveBeenCalledTimes(0);
    });
  });

The function I want to test:

export const download = document => {
  const blob = new Blob([base64ToArrayBuffer(document.content)], {
    type: 'application/pdf',
  });
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
    return;
  }

  const fileURL = URL.createObjectURL(blob);
  window.open(fileURL);
};

Now reading a bit about **your** jest, it even seems your question is a [tag:jsdom] one. — Kaiido, Oct 24 '18 at 12:56
Possible duplicate of [How to mock the JavaScript window object using Jest?](https://stackoverflow.com/questions/41885841/how-to-mock-the-javascript-window-object-using-jest) — barbsan, Oct 24 '18 at 12:59

None of your Beez Wax · Accepted Answer · 2018-10-25T18:00:20.280

79

This would appear to be as simple as setting up URL on the Global in Jest. Something like

describe('download', () => {
  const documentIntial = { content: 'aaa' };
  global.URL.createObjectURL = jest.fn();
  it('msSaveOrOpenBlob should not have been called when navigao is undefined', () => {
    global.URL.createObjectURL = jest.fn(() => 'details');
window.navigator.msSaveOrOpenBlob = jest.fn(() => 'details');
download(documentIntial);
expect(window.navigator.msSaveOrOpenBlob).toHaveBeenCalledTimes(1);
  });
});

This should result in a test that you can also use for checking if global.URL.createObjectURL was called. As a side note: you may also run into a similar issue with window.open I would suggest mocking that as well if this becomes the case.

edited Oct 25 '18 at 18:00

answered Oct 24 '18 at 13:05

None of your Beez Wax

1,113
8
13

3

I have this result : expect(jest.fn())[.not].toHaveBeenCalledTimes() jest.fn() value must be a mock function or spy. Received: undefined – Melchia Oct 24 '18 at 13:28
1

Take a look at that I actually tested it this time. You should not be nulling the msSaveOrOpenBlob. You will want to mock it to be able to tell how often it has been called... otherwise it is not going to give you a call count. – None of your Beez Wax Oct 25 '18 at 18:02

score 32 · Answer 2 · answered Jun 18 '19 at 07:08

Since window.URL.createObjectURL is not (yet) available in jest-dom, you need to provide a mock implementation for it.

Don't forget to reset the mock implementation after each test.

describe("your test suite", () => {
  window.URL.createObjectURL = jest.fn();

  afterEach(() => {
    window.URL.createObjectURL.mockReset();
  });

  it("your test case", () => {
    expect(true).toBeTruthy();
  });
});

Kaiido · Answer 3 · 2018-10-24T14:44:17.987

jsdom, the JavaScript implementation of the WHATWG DOM used by jest doesn't implement this method yet.

You can find an open ticket about this exact issue on their github page where some workarounds are provided in comments. But if you need the blobURL to actually work you'll have to wait this FR is solved.

Workaround proposed in the comments of the issue for jest:

function noOp () { }
if (typeof window.URL.createObjectURL === 'undefined') { 
  Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
}

score 18 · Answer 4 · answered Jun 13 '20 at 10:22

18

You just have to Write this in your setupTest.js

window.URL.createObjectURL = function() {};

answered Jun 13 '20 at 10:22

Varun Pradhan

587
5
8

2

This finally worked for me when several other options didn't. – MikeTwo Nov 17 '21 at 20:36

score 7 · Answer 5 · answered Mar 25 '22 at 20:22

7

The package jsdom-worker happens to provide this method, as well as adding support for web workers. The following worked for me:

npm install -D jsdom-worker

Then in package.json, edit or add a jest key:

{
  ...
  "jest": {
    "setupFiles": [
      "jsdom-worker"
    ]
  }
}

answered Mar 25 '22 at 20:22

Lucas Wiman

10,021
2
37
41

Out of the box, Create React App does not support overriding the Jest option "setupFiles". – Hultan Aug 19 '22 at 06:27
@Hultan but you can create an isolate jest.config.js file, which is better to isolate functionality – CrsCaballero Dec 06 '22 at 18:39

Michael S · Answer 6 · 2021-11-08T21:29:09.140

Just mocking the function global.URL.createObjectURL did not work for me, because the function was used by some modules during import and I got the error Jest URL.createObjectURL is not a function during import.

Instead it did help to create a file mockJsdom.js

Object.defineProperty(URL, 'createObjectURL', {
  writable: true,
  value: jest.fn()
})

Then import this file as the first import in your file containing the test

import './mockJsdom'
import { MyObjects} from '../../src/lib/mylib'

test('my test', () => {
  // test code
}

Found here: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

Jacque · Answer 7 · 2023-07-25T19:52:12.653

Using react-testing-library with jest:

I had to add jest.spyOn(URL, 'createObjectURL').mockImplementation(); inside my test. This worked in conjunction with creating a mock file for the dom object

Object.defineProperty(URL, 'createObjectURL', {writable: true, value: jest.fn()})

and adding the import statement for that mock file as the first import inside my testing file.

Note: the mock file cannot be inside the tests directory

Jest URL.createObjectURL is not a function

7 Answers7

Linked