我如何使用Jest模拟JavaScript的“窗口”对象?

我需要测试一个在浏览器中打开一个新选项卡的功能

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

我想模拟窗口的打开函数，这样我就可以验证正确的URL被传递给打开函数。

使用笑话，我不知道如何模拟窗口。我试着设置窗口。使用mock函数打开，但这种方式不起作用。下面是测试用例:

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]

我应该对测试用例做什么?

当前回答

Jest中的窗口对象是自我嘲笑的

其他答案中没有提到的一件事是OP的评论:

使用笑话，我不知道如何模仿窗户。

窗口对象已经被模拟，并且可以开箱引用。

从文档中可以看到:

Jest附带jsdom，它模拟DOM环境，就像您在浏览器中一样。这意味着我们调用的每个DOM API都可以用在浏览器中观察到的相同方式观察到!

例子:

describe('i am a window', () => {
    it('has a window object', () => {
      expect(window).toBeTruthy(); // test will pass
    });
});

2022-01-08 02:39:50

其他回答

const windowSpy = jest.spyOn(iFrame, "contentWindow", "get");
windowSpy.mockImplementation(() => ({
  location: {
    origin: "https://test.com",
    href: "href",
    hash: "hash"
  }
}));

2021-09-02 15:56:58

在我的组件，我需要访问window.location.search。这是我在Jest测试中所做的:

Object.defineProperty(global, "window", {
  value: {
    location: {
      search: "test"
    }
  }
});

如果窗口属性在不同的测试中必须不同，我们可以将窗口模拟放到函数中，并使其可写，以便在不同的测试中重写:

function mockWindow(search, pathname) {
  Object.defineProperty(global, "window", {
    value: {
      location: {
        search,
        pathname
      }
    },
    writable: true
  });
}

并在每次测试后重置:

afterEach(() => {
  delete global.window.location;
});

2020-06-29 17:33:39

在Jest配置中，添加setupFilesAfterEnv: ["./setupTests.js"]，创建该文件，并添加您想要在测试之前运行的代码:

// setupTests.js
window.crypto = {
   .....
};

参考:setupFilesAfterEnv [array]

2019-05-08 10:52:43

我直接将jest.fn()赋值给window.open。

window.open = jest.fn()
// ...code
expect(window.open).toHaveBeenCalledTimes(1)
expect(window.open).toHaveBeenCalledWith('/new-tab','_blank')

2020-09-04 07:22:22

如果它类似于window.location.href中的窗口位置问题，则不能在测试中更改。#890，你可以尝试(调整):

delete global.window.open;
global.window = Object.create(window);
global.window.open = jest.fn();

2019-08-22 15:01:48

我如何使用Jest模拟JavaScript的“窗口”对象?

推荐文章

最新文章

标签