使用 Jest 模拟 Es6 类

2024-04-25

我正在尝试使用接收参数的构造函数来模拟 ES6 类,然后使用 Jest 模拟该类上的不同类函数以继续测试。

问题是我找不到任何有关如何解决此问题的文档。我已经看过了这个帖子 https://stackoverflow.com/questions/43749845/how-to-mock-es6-class-using-jest,但它并没有解决我的问题,因为实际上OP甚至不需要模拟类!该帖子中的另一个答案也根本没有详细说明,没有指向任何在线文档,也不会导致可复制的知识,因为它只是一个代码块。

假设我有以下课程:

//socket.js;

module.exports = class Socket extends EventEmitter {

    constructor(id, password) {
        super();

        this.id = id;
        this.password = password;

        this.state = constants.socket.INITIALIZING;
    }

    connect() {
        // Well this connects and so on...
    } 

};

//__tests__/socket.js

jest.mock('./../socket');
const Socket = require('./../socket');
const socket = new Socket(1, 'password');

expect(Socket).toHaveBeenCalledTimes(1);

socket.connect()
expect(Socket.mock.calls[0][1]).toBe(1);
expect(Socket.mock.calls[0][2]).toBe('password');

很明显,我试图嘲笑的方式Socket和类函数connect这是错误的,但我找不到正确的方法。

请在你的答案中解释你模拟这个的逻辑步骤以及为什么每个步骤都是必要的+如果可能的话提供 Jest 官方文档的外部链接!

谢谢您的帮助!


Update:

所有这些信息和更多信息现已添加到新指南中的 Jest 文档中,“ES6 类模拟 https://facebook.github.io/jest/docs/en/es6-class-mocks.html."

完全披露:我写的。 :-)


模拟 ES6 类的关键是要知道ES6 类是一个函数。所以,模拟也必须是一个函数.

  1. Call jest.mock('./mocked-class.js');,并导入“./mocked-class.js”。
  2. 对于要跟踪调用的任何类方法,创建一个指向模拟函数的变量,如下所示:const mockedMethod = jest.fn();。在下一步中使用它们。
  3. Call MockedClass.mockImplementation()。传入一个箭头函数,该函数返回一个包含任何模拟方法的对象,每个方法设置为自己的模拟函数(在步骤 2 中创建)。
  4. 可以使用手动模拟(__mocks__ 文件夹)来模拟 ES6 类来完成同样的事情。在这种情况下,导出的模拟是通过调用创建的jest.fn().mockImplementation(),与上面 (3) 中描述的参数相同。这将创建一个模拟函数。在这种情况下,您还需要导出您想要监视的任何模拟方法。
  5. 可以通过调用来完成同样的事情jest.mock('mocked-class.js', factoryFunction),其中,factoryFunction 又是上面 3 和 4 中传递的相同参数。

一个例子抵得上一千个字,所以这里是代码。 此外,这里还有一个演示所有这些的存储库:https://github.com/jonathan-stone/jest-es6-classes-demo/tree/mocks-working https://github.com/jonathan-stone/jest-es6-classes-demo/tree/mocks-working

首先,对于你的代码

如果您要添加以下设置代码,您的测试应该会通过:

const connectMock = jest.fn(); // Lets you check if `connect()` was called, if you want

Socket.mockImplementation(() => {
    return {
      connect: connectMock
    };
  });

(注意,在您的代码中:Socket.mock.calls[0][1]应该[0][0], and [0][2]应该[0][1]. )

接下来,一个人为的例子

内嵌一些解释。

模拟类.js。请注意,测试期间永远不会调用此代码。

export default class MockedClass {
  constructor() {
    console.log('Constructed');
  }

  mockedMethod() {
    console.log('Called mockedMethod');
  }
}

模拟类consumer.js。此类使用模拟类创建一个对象。我们希望它创建一个模拟版本而不是真实版本。

import MockedClass from './mocked-class';

export default class MockedClassConsumer {
  constructor() {
    this.mockedClassInstance = new MockedClass('yo');
    this.mockedClassInstance.mockedMethod('bro');
  }
}

模拟类consumer.test.js- 考试:

import MockedClassConsumer from './mocked-class-consumer';
import MockedClass from './mocked-class';

jest.mock('./mocked-class'); // Mocks the function that creates the class; replaces it with a function that returns undefined.

// console.log(MockedClass()); // logs 'undefined'

let mockedClassConsumer;
const mockedMethodImpl = jest.fn();

beforeAll(() => {
  MockedClass.mockImplementation(() => {
    // Replace the class-creation method with this mock version.
    return {
      mockedMethod: mockedMethodImpl // Populate the method with a reference to a mock created with jest.fn().
    };
  });
});

beforeEach(() => {
  MockedClass.mockClear();
  mockedMethodImpl.mockClear();
});

it('The MockedClassConsumer instance can be created', () => {
  const mockedClassConsumer = new MockedClassConsumer();
  // console.log(MockedClass()); // logs a jest-created object with a mockedMethod: property, because the mockImplementation has been set now.
  expect(mockedClassConsumer).toBeTruthy();
});

it('We can check if the consumer called the class constructor', () => {
  expect(MockedClass).not.toHaveBeenCalled(); // Ensure our mockClear() is clearing out previous calls to the constructor
  const mockedClassConsumer = new MockedClassConsumer();
  expect(MockedClass).toHaveBeenCalled(); // Constructor has been called
  expect(MockedClass.mock.calls[0][0]).toEqual('yo'); // ... with the string 'yo'
});

it('We can check if the consumer called a method on the class instance', () => {
  const mockedClassConsumer = new MockedClassConsumer();
  expect(mockedMethodImpl).toHaveBeenCalledWith('bro'); 
// Checking for method call using the stored reference to the mock function
// It would be nice if there were a way to do this directly from MockedClass.mock
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Jest 模拟 Es6 类 的相关文章

  • 如何全局公开 es6 模块

    我需要编写一个可在全局窗口上使用的模块 我使用 es6 创建模块 我定义的每个类都有它自己的文件 我正在使用 webpack 来 babelify 并捆绑这些类 我的模块的入口点也是包含要公开的全局的文件 我尝试了各种方法来实现这一点 包括
  • 如何使用 ASP.Net 中的 PageMethods 将多维数组从 Javascript 传递到服务器

    我有一些 li 我的 HTML 页面中的项目如下 li li class ui state default Item 2 li li class ui state default Item 3 li li class ui state de
  • Angular 模板调用函数可以返回 Promise

    Angular 的 q 文档 http docs angularjs org api ng 24q说 q 承诺被模板引擎以角度方式识别 这意味着在模板中 您可以将附加到范围的承诺视为结果值 Angular 的视图模板还允许您计算表达式 这意
  • 找出右键单击的 DOM 元素

    我使用以下代码片段来构建自定义上下文菜单
  • 使用 MapBox GL JS 无需访问令牌

    有没有办法使用MapBox GL JS没有访问令牌 我在文档中找不到任何提示MapBox GL JS https docs mapbox com mapbox gl js api 然而 Uber建议是可以通过他们的图书馆 https ube
  • Iron 路由器中的多个订阅

    我一直在开发一个使用评论功能的应用程序 这导致必须订阅发表评论的集合和评论集合本身 现在看起来像这样
  • JavaScript:异常排序

    假设我有一个对象数组 为了更简单的显示目的 我将其显示为数组 TEST NEW ALPHA ZOO WHATEVER 我需要按字母顺序对其进行排序 简单的部分 但是 我需要以某种方式对其进行排序 即某个单词 可以说NEW将会在最后结束 AL
  • 在打字稿中读取和写入文本文件

    我应该如何从 Node js 中的 TypeScript 读取和写入文本文件 我不确定是否会在 node js 中读 写沙箱文件 如果没有 我相信应该有一种访问文件系统的方法 相信应该有一种访问文件系统的方法 Include node d
  • 跨多个子域的 WebAuthn

    我正在尝试在我的网站上设置 WebAuthn 身份验证流程 但遇到了问题 我希望我的用户能够在主网站 www domain com 上注册他们的设备 以便可以通过用户设置轻松访问 身份验证本身通过 IdP sso domain com 在不
  • 如何从 Selectize 中删除项目?

    有什么方法可以从 Selectize 中删除项目吗 这是我的示例列表 AMNT QTY NA 当我经过时NA它应该删除特定项目 fn removeSelectorValue function value var selectize this
  • 需要帮助在 D3.js 条形图中将 x 轴刻度与条形对齐

    我有一个可用的线性条形图D3 js http d3js org 它也有基于时间的 x 轴 条形图绑定到计数属性 而轴绑定到日期属性 轴上的刻度未与条形对齐 知道如何将它们两者排列起来吗 这是 jsFiddle http jsfiddle n
  • 如何访问打字稿中的组件

    我有一个基本的 Angular 应用程序 如下所示 app component html h1 Test Umgebung h1 div div
  • Firebase 如何更新多个子项?

    我有很多这样的孩子的父母 Parent childe1 data childe2 data childe3 data childe4 data childe5 data 我怎样才能更新孩子们的信息 childe1 childe2 child
  • Ionic 框架:创建项目时 Ionic 构建失败 (v4.12.0)

    I have ionic安装在我的系统中 当我跑步时ionic run app tabs它安装了所有npm包 但随后提示符变为 Downloading binary from https github com sass node sass
  • 在单个测试中断言多个条件,还是分成多个测试? [复制]

    这个问题在这里已经有答案了 如果您正在测试如下所示的计数函数 那么在一个函数中测试该函数的多项内容与为每个测试使用一个测试函数相比 是否被认为是 正确 或 错误 function testGetKeywordCount tester thi
  • 在多个 html 文件上运行 javascript

    我有一个包含 1000 个 html 文件的文件夹 我必须使用 xpath 从每个 html 中删除某些节点 所以我已经制作了javascript 我无法打开每个文件并通过 Firefox 控制台运行 javascript 我用的是linu
  • 智能表 - 预选特定行

    我正在使用智能表 我需要预先选择特定行 因此 在加载我的列表后 我循环进入它并设置isSelected当我到达我想要选择的项目时属性 Preselect a row for var i 0 len scope displayCollecti
  • 如何从 Backbone 集合中提取多个属性?

    我试图从 Backbone 集合中提取多个属性 但它返回undefined 收藏 id 1 name raju age 23 sex male hobbies id 2 name ramesh age 43 sex male hobbies
  • 未捕获的类型错误:未定义不是 indexOf 上的函数

    我目前有此代码来检查特定 ID 的网站 URL GET 选项 但每当运行此代码时 我都会收到一个奇怪的错误 Uncaught TypeError Undefined is not a function 这是我的代码 如果我能得到关于这个问题
  • JavaScript Intellisense 在 Visual Studio 2015 中不起作用

    我知道这个问题在网上以及整个网络上都有很多重复的问题 不幸的是 所提出的建议都不起作用 除了重新安装 VS 15 之外 我已经完成了所有操作 如果我可以帮助的话 我宁愿不这样做 我去过的一个网站 references js 背后的故事 ht

随机推荐

  • Eclipse(在 Ubuntu 上)没有 jsp、html 和其他 Web 文件模板

    我使用 Synaptic Package Manager Ubuntu 9 10 安装了 Eclipse 但是 我的 Eclipse 没有任何 HTML 模板 在 新建 对话框中 或 JSP 模板 我该如何修复它 以便我在那里拥有一些 HT
  • Python根据for循环索引创建变量[重复]

    这个问题在这里已经有答案了 我正在尝试为 for 循环的每次迭代创建变量 对于范围 10 内的 i x i abc 这样我就可以得到 x1 x2 x3 x4 x10 都等于 abc 有人知道该怎么做吗 谢谢 你不应该这样做 将你的值存储在d
  • 使用 Base64 和 JSON 上传大图像

    我正在使用此功能将图像上传到服务器JSON 为此 我首先将图像转换为NSData然后到NSString using Base64 当图像不是很大时 该方法工作正常 但当我尝试上传 2Mb 图像时 它会崩溃 问题是服务器没有收到我的图像 即使
  • 使用 Appcompat v7 的抽屉式导航 - ?android:attr 标签的问题

    我在我的项目中使用操作栏和导航抽屉 使用 appcompat v7 和 v4 我已经添加了 appcompat v7 和资源 以下是我的导航抽屉列表的文本视图 直接取自位于以下位置的 Android 示例应用程序 创建抽屉式导航 http
  • C#:通过反射检索和使用 IntPtr*

    我目前正在编写一些代码 这些代码反映了从调用本机 dll 中编组回来的结构 某些结构包含指向以 null 结尾的指针数组的 IntPtr 字段 这些领域需要特殊处理 当反映结构时 我可以识别这些字段 因为它们是由自定义属性标记的 以下说明了
  • ant-找不到符号@Test

    我正在尝试编译以下仅包含一个函数的类 公共类测试注释 Test public void testLogin System out println Testing Login 当我将文件作为 JUNIt 运行时 它可以工作 但是当我尝试从 b
  • 计算 a*a mod n 且不溢出

    I need to calculate a a mod n but a is fairly large resulting in overflow when I square it Doing a n a n n doesn t work
  • 树莓派蓝牙4.0连接

    我正在尝试使用 CoreBluetooth 蓝牙 4 0 通过 iPhone 连接到 Raspberry Pi 我已经发现了该设备并使用以下代码发出连接请求 if peripheral self foundPeripheral NSLog
  • Javascript ResizeObserver 意外触发

    Why the ResizeObserver类总是首先执行处理程序observe 尝试在 Chrome 开发工具上执行以下代码 new ResizeObserver gt console log resize detected observ
  • 从 asp.net 中的 dataSet 获取单个值

    我正在执行查询以从 tbl message 表获取 Title 和 RespondBY 我想在对转发器进行数据绑定之前解密标题 在进行数据绑定之前如何访问标题值 string MysqlStatement SELECT Title Resp
  • jQuery 显示/隐藏/切换有效,但没有保持应有的状态 - 它恢复到原始状态

    我尝试使用 jQuery 显示 隐藏常见问题解答 这个想法是列出所有问题 只有当用户想要查看答案时 他们才会单击问题 看起来像链接 然后答案就会变得可见 它有点有效 只不过一旦单击答案就会恢复到其原始状态 在这种情况下 这意味着当我单击问题
  • 对一列进行唯一约束,排除其他列中具有相同值的行

    我想向列添加唯一键value但我必须忽略列中具有相同值的行value and header id 例如 考虑这个表 id header id value 1 1 a 2 1 a 3 2 a 因此 第 1 行和第 2 行指向同一个对象 并且唯
  • 您可以在不同的 OSGi 包中拥有 JSF 自定义组件吗?

    有人同时使用过 OSGi 和 JSF 吗 我问这个问题是因为 JSF 使用类加载器魔法来查找自定义组件 来自教程 重点是我的 这个配置文件最终会 是 META INF faces config xml 中 代表此的 jar 文件 成分 JS
  • 如何在没有 Intent 的情况下以编程方式拨打电话

    我是 Android 新手 我想在不使用intent 我知道这段代码 Intent intent new Intent Intent ACTION CALL intent setData Uri parse tel bundle getSt
  • 如何将焦点设置到重复控件内的编辑框?

    我想将焦点设置为 将光标置于重复控件中的编辑框 最后一个 重复位于面板 panelRep 内 然后我在面板外面有一个按钮 这是几乎可以工作的按钮的客户端代码 焦点已设置 字段周围的蓝色边框 但光标未放置在字段中 用户仍必须单击该字段才能写入
  • C++ 中可重用的成员函数

    我正在使用这个成员函数来获取指向对象的指针 virtual Object Create return new Object 它是虚拟的 所以我可以获得指向派生对象的指针 现在我这样做 virtual Object Create return
  • 如何在 Google Cloud Platform (GCP) 中测试 Cloud Function?

    我一直在试图寻找这个问题的答案 但无法在任何地方找到它 在 Google Cloud Platform 控制台的 Cloud Functions 部分上 有一个部分标题为 测试 但我不知道应该在此处放置什么来测试该函数 即语法 I have
  • 设计和处理闪光灯

    我正在将 Devise 3 1 1 与 Rails 3 一起使用 并且我的布局中有以下闪存处理代码 我登录我的应用程序 Flash 说 Signed in successfully 然后注销 然后错误登录并闪烁显示 Signed out s
  • iPhone:如何编写减少倒数计时器的代码?

    我想使用显示倒计时器UILabel将从 5 开始并且每秒减少 1 like 5 4 3 2 1 最后当达到 0 时隐藏标签 我尝试使用它进行编码NSTimer scheduledTimerWithTimeInterval但惨败 请帮我 我只
  • 使用 Jest 模拟 Es6 类

    我正在尝试使用接收参数的构造函数来模拟 ES6 类 然后使用 Jest 模拟该类上的不同类函数以继续测试 问题是我找不到任何有关如何解决此问题的文档 我已经看过了这个帖子 https stackoverflow com questions