前端测试框架Jest系列教程 -- Mock Functions

写在前面:

  在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来说我只关心我测试的方法的内部逻辑,我并不关注与当前class本身依赖的实现,所以我们通常会Mock掉依赖接口的返回,因为我们的测试重点在于特定的方法,所以在Jest中同样提供了Mock的功能,本节主要介绍Jest的Mock Function的功能。

Jest中的Mock Function

Mock 函数可以轻松地测试代码之间的连接——这通过擦除函数的实际实现,捕获对函数的调用 ( 以及在这些调用中传递的参数) ,在使用 new 实例化时捕获构造函数的实例,或允许测试时配置返回值的形式来实现。Jest中有两种方式的Mock Function,一种是利用Jest提供的Mock Function创建,另外一种是手动创建来覆写本身的依赖实现。

假设我们要测试函数 forEach 的内部实现,这个函数为传入的数组中的每个元素调用一个回调函数,代码如下:

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}

为了测试此函数,我们可以使用一个 mock 函数,然后检查 mock 函数的状态来确保回调函数如期调用。

const mockCallback = jest.fn();
forEach([0, 1], mockCallback);

// 此模拟函数被调用了两次
expect(mockCallback.mock.calls.length).toBe(2);

// 第一次调用函数时的第一个参数是 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// 第二次调用函数时的第一个参数是 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

几乎所有的Mock Function都带有 .mock的属性,它保存了此函数被调用的信息。 .mock 属性还追踪每次调用时 this的值,所以也让检视 this 的值成为可能:

const myMock = jest.fn();

const a = new myMock();
const b = {};
const bound = myMock.bind(b);
bound();

console.log(myMock.mock.instances);

在测试中,需要对函数如何被调用,或者实例化做断言时,这些 mock 成员变量很有帮助意义︰

// 这个函数只调用一次
expect(someMockFunction.mock.calls.length).toBe(1);

// 这个函数被第一次调用时的第一个 arg 是 ‘first arg‘
expect(someMockFunction.mock.calls[0][0]).toBe(‘first arg‘);

// 这个函数被第一次调用时的第二个 arg 是 ‘second arg‘
expect(someMockFunction.mock.calls[0][1]).toBe(‘second arg‘);

// 这个函数被实例化两次
expect(someMockFunction.mock.instances.length).toBe(2);

// 这个函数被第一次实例化返回的对象中,有一个 name 属性,且被设置为了 ‘test’
expect(someMockFunction.mock.instances[0].name).toEqual(‘test‘);

Mock 函数也可以用于在测试期间将测试值注入您的代码︰

const myMock = jest.fn();
console.log(myMock());
// > undefined

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce(‘x‘)
  .mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock());

用于函数连续传递风格(CPS)的代码中时,Mock 函数也非常有效。 以这种风格编写的代码有助于避免那种需要通过复杂的中间值,来重建他们在真实组件的行为,这有利于在它们被调用之前将值直接注入到测试中。

const filterTestFn = jest.fn();

// Make the mock return `true` for the first call,
// and `false` for the second call
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(filterTestFn);

console.log(result);
// > [11]
console.log(filterTestFn.mock.calls);
// > [ [11], [12] ]

大多数现实世界的例子实际上都涉及到将一个被依赖的组件上使用 mock 函数替代并进行配置,这在技术上(和上面的描述)是相同的。 在这些情况下,尽量避免在非真正想要进行测试的任何函数内实现逻辑。

有些情况下超越指定返回值的功能是有用的,并且全面替换了模拟函数的实现。

const myMockFn = jest.fn(cb => cb(null, true));

myMockFn((err, val) => console.log(val));
// > true

myMockFn((err, val) => console.log(val));
// > true

如果你需要定义一个模拟的函数,它从另一个模块中创建的默认实现,mockImplementation方法非常有用︰

// foo.js
module.exports = function() {
  // some implementation;
};

// test.js
jest.mock(‘../foo‘); // this happens automatically with automocking
const foo = require(‘../foo‘);

// foo is a mock function
foo.mockImplementation(() => 42);
foo();
// > 42

当你需要重新创建复杂行为的模拟功能,这样多个函数调用产生不同的结果时,请使用 mockImplementationOnce 方法︰

const myMockFn = jest
  .fn()
  .mockImplementationOnce(cb => cb(null, true))
  .mockImplementationOnce(cb => cb(null, false));

myMockFn((err, val) => console.log(val));
// > true

myMockFn((err, val) => console.log(val));
// > false

当指定的mockImplementationOnce 执行完成之后将会执行默认的被jest.fn定义的默认实现,前提是它已经被定义过。

const myMockFn = jest
  .fn(() => ‘default‘)
  .mockImplementationOnce(() => ‘first call‘)
  .mockImplementationOnce(() => ‘second call‘);

console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
// > ‘first call‘, ‘second call‘, ‘default‘, ‘default‘

对于有通常链接的方法(因此总是需要返回this)的情况,我们有一个语法糖的API以.mockReturnThis()函数的形式来简化它,它也位于所有模拟器上:

const myObj = {
  myMethod: jest.fn().mockReturnThis(),
};

// is the same as

const otherObj = {
  myMethod: jest.fn(function() {
    return this;
  }),
};

你也可以给你的Mock Function起一个准确的名字,这样有助于你在测试错误的时候在输出窗口定位到具体的Function

const myMockFn = jest
  .fn()
  .mockReturnValue(‘default‘)
  .mockImplementation(scalar => 42 + scalar)
  .mockName(‘add42‘);

最后,为了更简单地说明如何调用mock函数,我们为您添加了一些自定义匹配器函数:

// The mock function was called at least once
expect(mockFunc).toBeCalled();

// The mock function was called at least once with the specified args
expect(mockFunc).toBeCalledWith(arg1, arg2);

// The last call to the mock function was called with the specified args
expect(mockFunc).lastCalledWith(arg1, arg2);

// All calls and the name of the mock is written as a snapshot
expect(mockFunc).toMatchSnapshot();

这些匹配器是真的只是语法糖的常见形式的检查 .mock 属性。 你总可以手动自己如果是更合你的口味,或如果你需要做一些更具体的事情︰

// The mock function was called at least once
expect(mockFunc.mock.calls.length).toBeGreaterThan(0);

// The mock function was called at least once with the specified args
expect(mockFunc.mock.calls).toContain([arg1, arg2]);

// The last call to the mock function was called with the specified args
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
  arg1,
  arg2,
]);

// The first arg of the last call to the mock function was `42`
// (note that there is no sugar helper for this specific of an assertion)
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);

// A snapshot will check that a mock was invoked the same number of times,
// in the same order, with the same arguments. It will also assert on the name.
expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
expect(mockFunc.mock.getMockName()).toBe(‘a mock name‘);

写在最后:

本文只是简单的介绍了Mock Function的功能,更完整的匹配器列表,请查阅 参考文档

时间: 2024-11-05 22:42:12

前端测试框架Jest系列教程 -- Mock Functions的相关文章

前端测试框架Jest系列教程 -- Expect(验证)

写在前面 在编写测试时,我们通常需要检查值是否满足某些条件,Jest中提供的expect允许你访问很多“Matchers”,这些“匹配器”允许您验证不同的东西. Expect 可以验证什么 Jest中提供了如下的验证方法: expect(value) expect.extend(matchers) expect.anything() expect.any(constructor) expect.arrayContaining(array) expect.assertions(number) ex

前端测试框架Jest系列教程 -- 匹配器

写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看. 常用的匹配方式: 第一种:相等匹配,这是我们最常用的匹配规则 test('two plus two is four', () => { expect(2 + 2).toBe(4); }); 在这段代码中 expact(2 + 2) 将返回我们期望的结果,通常情况下我们只需要调用expect就可以,括号中的

前端测试框架Jest系列教程 -- Matchers(匹配器)

写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看. 常用的匹配方式: 第一种:相等匹配,这是我们最常用的匹配规则 test('two plus two is four', () => { expect(2 + 2).toBe(4); }); 在这段代码中 expact(2 + 2) 将返回我们期望的结果,通常情况下我们只需要调用expect就可以,括号中的

前端测试框架

一.为什么要进行测试? 一个 bug 被隐藏的时间越长,修复这个 bug 的代价就越大.大量的研究数据指出:最后才修改一个 bug 的代价是在 bug 产生时修改它的代价的10倍.所以要防患于未然. 从语言的角度讲 JavaScript 作为 web 端使用最广泛的编程语言,它是动态语言,缺乏静态类型检查,所以在代码编译期间,很难发现像变量名写错,调用不存在的方法, 赋值或传值的类型错误等错误. 例如下面的例子, 这种类型不符的情况在代码中非常容易发生 function foo(x) { ret

前端测试框架 puppeteer 文档翻译

puppeteer puppeteer 是一个通过DevTools 协议提供高级API 来控制 chrome,chromium 的 NODE库; puppeteer默认运行在 headless 模式, 也可配置后运行在全模式(non-headless). puppeteer可以做什么 大部分在浏览器里手动执行的动作都可以通过puppeteer实现! 这里有几个列子来让你开始. 生成页面截图和PDF. 爬取单页面应用生成提前渲染的内容(例如 SSR). 自动提交表单, UI测试, 键盘输入等. 创

前端测试框架学习

做了一年多的前端,从没有认真写过单元测试,对于常说的各种框架并不能彻底的分清,这次做了一个认真的学习与总结. 单元测试框架:Mocha, Jasmine等,因测试框架不包含断言库,因此需要引入断言库,Jasmine带有断言库assertions(未使用过).断言库 assert, shouldjs, chai等,具体的单元测试用例中使用karma是一款自动化测试工具,通过使用配置文件自动检测单元测试文件并进行测试,输出测试结果travis ci 持续集成服务,实现对代码库的代码的检测,编译,发布

ASP.NET MVC框架开发系列教程

本系列教程是自己在工作中使用到而记录的,如有错误之处,请给与指正 文章目录 MVC4 开篇 第一章 初识MVC4 第二章 下山遇虎(@helper) 第三章 Models模块属性详解 第四章 在MVC4.0中对脚本以及样式表的引用变化 第五章 MVC之Bundle详解

前端css框架SASS使用教程(转)

一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了. 2

【前端】CentOS 7 系列教程之五: 安装最新版 nginx 并设置 nginx 代理转发 node 服务

转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_5.html 进入/usr/local目录 cd /usr/local 下载最新版的ngxin压缩包 wget http://nginx.org/download/nginx-1.13.9.tar.gz 解压 tar -zxvf nginx-1.13.9.tar.gz 删除压缩包 rm -f nginx-1.13.9.tar.gz 进入nginx目录准备安装 cd nginx-1.13.9 使用默认配