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 jsdom one. — Kaiido
– Kaiido, Commented Oct 24, 2018 at 12:56
Possible duplicate of How to mock the JavaScript window object using Jest? — barbsan
– barbsan, Commented Oct 24, 2018 at 12:59

Mario Petrovic · Accepted Answer · 2024-02-23 14:47:22Z

109

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 Feb 23, 2024 at 14:47

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Oct 24, 2018 at 13:05

None of your Beez Wax

1,4131 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Melchia Over a year ago

I have this result : expect(jest.fn())[.not].toHaveBeenCalledTimes() jest.fn() value must be a mock function or spy. Received: undefined

None of your Beez Wax Over a year ago

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.

Carlos Zinato Feb 19 at 20:51

for those wanted to achieve the same with vitest instead of jest this will also work as long as you set globals: true on vitest.config vitest.dev/config/#globals

jackdbd · Accepted Answer · 2019-06-18 07:08:53Z

37

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();
  });
});

answered Jun 18, 2019 at 7:08

jackdbd

5,0954 gold badges32 silver badges42 bronze badges

1 Comment

lukasniessen Mar 14 at 14:06

You meant: not (yet) available in js-dom

Kaiido · Accepted Answer · 2018-10-24 14:44:17Z

20

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})
}

edited Oct 24, 2018 at 14:44

answered Oct 24, 2018 at 13:01

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Comments

Varun Pradhan · Accepted Answer · 2020-06-13 10:22:48Z

19

You just have to Write this in your setupTest.js

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

answered Jun 13, 2020 at 10:22

Varun Pradhan

6076 silver badges8 bronze badges

1 Comment

MikeTwo Over a year ago

This finally worked for me when several other options didn't.

Michael S · Accepted Answer · 2021-11-08 21:29:09Z

10

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

edited Nov 8, 2021 at 21:29

answered Nov 8, 2021 at 20:06

Michael S

9101 gold badge11 silver badges22 bronze badges

2 Comments

Nagama Inamdar Over a year ago

I wrote the mock function just before starting of the test suite. That too worked. Thanks a lot for this useful answer and reference link as well.

Kamran Bigdely Over a year ago

Also add "import {jest} from '@jest/globals';" at the top of mockJsdom file. From : jestjs.io/docs/ecmascript-modules

Lucas Wiman · Accepted Answer · 2022-03-25 20:22:51Z

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, 2022 at 20:22

Lucas Wiman

11.5k3 gold badges42 silver badges45 bronze badges

2 Comments

Hultan Over a year ago

Out of the box, Create React App does not support overriding the Jest option "setupFiles".

CrsCaballero Over a year ago

@Hultan but you can create an isolate jest.config.js file, which is better to isolate functionality

Jacque · Accepted Answer · 2023-07-25 19:52:12Z

1

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

edited Jul 25, 2023 at 19:52

answered Jul 25, 2023 at 19:48

Jacque

113 bronze badges

Comments

Hard Monkey PC · Accepted Answer · 2023-12-10 02:35:23Z

1

this code simulates a blob url to test your full cycle

    global.URL.createObjectURL = jest.fn(
      (blob: any) => `blob:${blob.size}#t=${Date.now()}`
    )

answered Dec 10, 2023 at 2:35

Hard Monkey PC

635 bronze badges

Collectives™ on Stack Overflow

Jest URL.createObjectURL is not a function

8 Answers 8

3 Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related