开玩笑的URL.createObjectURL不是一个函数

时间:2018-10-24 12:26:23

标签: javascript reactjs testing blob jestjs

我正在开发一个reactJs应用程序。我正在开玩笑地测试我的应用程序。 我想测试下载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);
};

4 个答案:

答案 0 :(得分:7)

这似乎很简单,就像在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的类似问题,如果情况如此,我建议您也对此进行嘲笑。

答案 1 :(得分:2)

jsdom,jest使用的WHATWG DOM的JavaScript实现尚未实现此方法。

您可以在其open ticket about this exact issue上找到github page,其中在注释中提供了一些解决方法。但是,如果您需要blobURL实际运行,则必须等待此FR解决。

在此问题的评论中提出了可笑的解决方法:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您只需要在setupTest.js中编写它

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