TypeError: Right-hand side of 'instanceof' is not callable thrown with vitest 1.x

[acelaya]

I have just updated to vitest 1.0.1, and most of the tests passed flawlessly, except for a couple that throw a TypeError: Right-hand side of 'instanceof' is not callable error when checking that a vi.fn() instance was called.

I can see three instances of this error, consistently on the exact same tests. This is the simplest example:

// Subject under test
class ImageDownloader {
  public constructor(private readonly fetch: Fetch, private readonly window: Window) {}

  public async saveImage(imgUrl: string, filename: string): Promise<void> {
    const data = await this.fetch(imgUrl).then((resp) => resp.blob());
    const url = URL.createObjectURL(data);

    saveUrl(this.window, url, filename);
  }
}

// Test
describe('ImageDownloader', () => {
  const fetch = vi.fn();
  let imageDownloader: ImageDownloader;

  beforeEach(() => {
    (global as any).URL = { createObjectURL: () => '' };

    imageDownloader = new ImageDownloader(fetch, windowMock);
  });

  it('calls URL with response type blob', async () => {
    fetch.mockResolvedValue({ blob: () => new Blob() });

    await imageDownloader.saveImage('/foo/bar.png', 'my-image.png');

    expect(fetch).toHaveBeenCalledWith('/foo/bar.png');
  });
});

When evaluating the last expect, this error is thrown:

 FAIL  test/utils/services/ImageDownloader.test.ts > ImageDownloader > calls URL with response type blob
TypeError: Right-hand side of 'instanceof' is not callable
 ❯ test/utils/services/ImageDownloader.test.ts:19:19
     17|     await imageDownloader.saveImage('/foo/bar.png', 'my-image.png');
     18| 
     19|     expect(fetch).toHaveBeenCalledWith('/foo/bar.png');
       |                   ^
     20|   });
     21| });

I'm not sure what could be causing this, as I have many other usages of expect(...).toHaveBeenCalledWith(...); and those work.

[hi-ogawa]

I think the culprit is:

(global as any).URL = { createObjectURL: () => '' };

which triggers an error since Vitest uses ... instanceof URL for any kinds of equality check which includes toHaveBeenCalledWith:

vitest/packages/expect/src/jest-utils.ts

Lines 99 to 100 in 0802167

	if (a instanceof URL && b instanceof URL)
	return a.href === b.href

This seems to be introduced recently in #4615.

I don't think mutating global like URL = { createObjectURL: () => '' } is recommended in any way, but as a quick fix, using something like this might help?

  (global as any).URL = Object.assign(function () {}, { createObjectURL: () => '', });

(Just tested this on stackblitz https://stackblitz.com/edit/vitest-dev-vitest-wrtlqt?file=test%2Fsuite.test.ts)

[sheremet-va]

I do agree with this but Vitest still shouldn't fail in this situation. Let's fix this!

[acelaya]

Thanks @hi-ogawa for the suggestion, but (global as any).URL = Object.assign(function () {}, { createObjectURL: () => '', }); throws a different error.

However, I started to wonder why I was mocking URL in the first place, as I don't see a clear reason. It turns out jsdom does not implement createObjectURL at the moment.

However, I don't need to overwrite the whole object, just add the missing method. Doing it like this solved the problem: (global as any).URL = Object.assign((global as any).URL, { createObjectURL: () => '' });.

Simply doing (global as any).URL.createObjectURL = () => ''; works as well.

[hi-ogawa]

I do agree with this but Vitest still shouldn't fail in this situation. Let's fix this!

@sheremet-va Just to confirm, you want to check typeof URL === "function" just before doing ... instanceof URL?

[sheremet-va]

Yep