首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用Jest模拟JavaScript窗口对象?

如何使用Jest模拟JavaScript窗口对象?
EN

Stack Overflow用户
提问于 2017-01-27 09:31:52
回答 16查看 187.7K关注 0票数 158

我需要测试一个在浏览器中打开一个新标签的函数

代码语言:javascript
复制
openStatementsReport(contactIds) {
  window.open(`a_url_${contactIds}`);
}

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

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

代码语言:javascript
复制
it('correct url is called', () => {
  window.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(window.open).toBeCalled();
});

但是它给了我一个错误

代码语言:javascript
复制
expect(jest.fn())[.not].toBeCalled()

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

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

EN

Stack Overflow用户

发布于 2020-01-12 22:17:24

有几种方法可以在Jest中模拟全局变量:

  1. 使用mockImplementation方法(最类似Jest的方法),但它只适用于那些具有jsdom提供的一些默认实现的变量。window.open就是其中之一:

test('it works',() => { // Setup const mockedOpen = jest.fn();//如果不制作副本,您将遇到循环依赖问题const originalWindow ={ ...window };const windowSpy = jest.spyOn(global," window ","get");windowSpy.mockImplementation(() => ({ ...originalWindow,//如果您需要其他窗口属性打开: mockedOpen }));//测试statementService.openStatementsReport(111) expect(mockedOpen).toBeCalled();//清理windowSpy.mockRestore();});

  1. 将该值直接分配给全局属性。这是最简单的,但它可能会触发一些window变量的错误消息,例如window.href

test('it works',() => { // Setup const mockedOpen = jest.fn();const originalOpen = window.open;window.open = mockedOpen;//测试statementService.openStatementsReport(111) expect(mockedOpen).toBeCalled();// Cleanup window.open = originalOpen;});

  1. 不直接使用全局变量(需要一些重构)

与直接使用全局值相比,从另一个文件导入全局值可能更干净,因此使用Jest时模拟将变得微不足道。

文件./test.js

代码语言:javascript
复制
jest.mock('./fileWithGlobalValueExported.js');
import { windowOpen } from './fileWithGlobalValueExported.js';
import { statementService } from './testedFile.js';

// Tests
test('it works', () => {
  statementService.openStatementsReport(111)
  expect(windowOpen).toBeCalled();
});

File./fileWithGlobalValueExported.js d.js

代码语言:javascript
复制
export const windowOpen = window.open;

文件./testedFile.js

代码语言:javascript
复制
import { windowOpen } from './fileWithGlobalValueExported.js';
export const statementService = {
  openStatementsReport(contactIds) {
    windowOpen(`a_url_${contactIds}`);
  }
}
票数 19
EN
查看全部 16 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41885841

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档