javascript - 如何使用 Jest 模拟 JavaScript 'window' 对象？

Question

我需要测试一个在浏览器中打开新标签页的功能

openStatementsReport(contactIds) {
  window.open(`a_url_${contactIds}`);
}

我想模拟 window 的 open 函数，这样我就可以验证传递给 open 函数的 URL 是否正确。

使用 Jest，我不知道如何模拟 window。我试图用模拟函数设置 window.open，但这种方式不起作用。下面是测试用例:

it('the correct URL is called', () => {
  window.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(window.open).toBeCalled();
});

但它给了我错误

expect(jest.fn())[.not].toBeCalled()

jest.fn() value must be a mock function or spy.
    Received:
      function: [Function anonymous]

我应该如何处理测试用例？

Answer 1

以下方法对我有用。这种方法使我能够测试一些应该在浏览器和 Node.js 中都可以工作的代码，因为它允许我将 window 设置为 undefined。

这是 Jest 24.8(我相信):

let windowSpy;

beforeEach(() => {
  windowSpy = jest.spyOn(window, "window", "get");
});

afterEach(() => {
  windowSpy.mockRestore();
});

it('should return https://example.com', () => {
  windowSpy.mockImplementation(() => ({
    location: {
      origin: "https://example.com"
    }
  }));

  expect(window.location.origin).toEqual("https://example.com");
});

it('should be undefined.', () => {
  windowSpy.mockImplementation(() => undefined);

  expect(window).toBeUndefined();
});