Jest URL.createObjectURL 不是函数

Posted 2023-02-22

【中文标题】Jest URL.createObjectURL 不是函数

【英文标题】：Jest URL.createObjectURL is not a function

【发布时间】：2019-03-28 20:49:10

【问题描述】：

我正在开发一个 reactJs 应用程序。我正在使用 jest 来测试我的应用程序。 我想测试一个下载 blob 的函数。

但不幸的是，我收到了这个错误：

URL.createObjectURL 不是函数

我的测试功能：

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

我要测试的功能：

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

【问题讨论】：

现在读一点你的笑话，你的问题似乎是jsdom一个。

How to mock the javascript window object using Jest?的可能重复

【参考方案1】：

jsdom，jest 使用的 WHATWG DOM 的 JavaScript 实现还没有实现这个方法。

您可以在他们的github page 上找到open ticket about this exact issue，其中在 cmets 中提供了一些解决方法。但是，如果您需要 blobURL 实际工作，则必须等待此 FR 解决。

在问题的 cmets 中提出的解决方法是为了开玩笑：

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

【参考方案2】：

这看起来就像在 Jest 中的 Global 上设置 URL 一样简单。类似的东西

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

这应该会产生一个测试，您也可以使用它来检查是否调用了 global.URL.createObjectURL。附带说明：您也可能会遇到与 window.open 类似的问题，如果出现这种情况，我建议您也嘲笑一下。

【讨论】：

我有这个结果：expect(jest.fn())[.not].toHaveBeenCalledTimes() jest.fn() 值必须是模拟函数或间谍。收到：未定义

看看我这次实际测试了。您不应该将 msSaveOrOpenBlob 归零。您将需要模拟它以便能够知道它被调用的频率......否则它不会给你一个调用计数。

【参考方案3】：

由于window.URL.createObjectURL（还）在 jest-dom 中不可用，您需要为其提供一个模拟实现。

不要忘记在每次测试后重置模拟实现。

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

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

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

【参考方案4】：

你只需要在你的 setupTest.js 中写这个

window.URL.createObjectURL = function() ;

【讨论】：

当其他几个选项都不起作用时，这终于对我有用了。

【参考方案5】：

使用 webkitURL.createObjectURL 而不是 URL.createObjectURL 它对我有用

【参考方案6】：

仅仅模拟函数 global.URL.createObjectURL 对我不起作用，因为该函数在导入过程中被某些模块使用，我在导入过程中收到错误 Jest URL.createObjectURL is not a function。

相反，它确实有助于创建文件mockJsdom.js

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

然后将此文件作为包含测试的文件中的第一个导入导入

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

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

在这里找到：https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom