Jest Mock createObjectURL in JavaScript

When testing code that uses the createObjectURL function, it can be difficult to write unit tests that rely on this function without actually creating real URLs. This is where Jest's mocking feature comes in handy.

In Jest, we can create a mock implementation of createObjectURL that returns a fake URL instead of a real one. This allows us to test our code without needing to connect to external resources.

Creating a Mock Implementation

To create a mock implementation of createObjectURL, we can use the jest.fn() function. This creates a new mock function that we can use in our tests.

// my-module.js
export function loadImage(url) {
  const img = new Image();
  img.src = URL.createObjectURL(url);
  return img;
}

// my-module.test.js
import { loadImage } from './my-module';

describe('loadImage', () => {
  it('returns an <img> element', () => {
    const url = new Blob(['test']);
    const createObjectURL = jest.fn(() => 'mock-url');
    URL.createObjectURL = createObjectURL;

    const img = loadImage(url);

    expect(img instanceof HTMLImageElement).toBe(true);
    expect(img.src).toBe('mock-url');
    expect(createObjectURL).toHaveBeenCalledWith(url);
  });
});

In this example, we define a simple module my-module that exports a function loadImage that takes a URL and returns an <img> element.

In the test file, we use Jest's describe() and it() functions to define a test suite for the loadImage function.

Inside the test case, we create a new Blob object to represent the image data, and then create a mock implementation of createObjectURL using jest.fn(). We set URL.createObjectURL to this mock implementation so that when loadImage calls this function, it will be using our mock implementation instead of the real one.

We then call loadImage with our test URL, and assert that the return value is an instance of HTMLImageElement and that the image's src property is set to our mock URL. We also assert that our mock implementation of createObjectURL was called with the correct arguments.

Conclusion

Jest's mocking feature is a powerful tool for testing code that relies on external resources, like the createObjectURL function. By creating a mock implementation, we can test our code without having to connect to real resources, making our test suite more reliable and faster to run.