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

写在前面:

  匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看。

常用的匹配方式:

第一种:相等匹配,这是我们最常用的匹配规则  

test(‘two plus two is four‘, () => {
  expect(2 + 2).toBe(4);
});

在这段代码中 expact(2 + 2) 将返回我们期望的结果,通常情况下我们只需要调用expect就可以,括号中的可以是一个具有返回值的函数,也可以是表达式。后面的 toBe  就是一个matcher,当Jest运行的时候它会记录所有失败的matcher的详细信息并且输出给用户,让维护者清楚的知道failed的原因,如果我们改成 toBe(5),将会有下面输出:

这样的输出结果非常易于我们去check错误点。

toBe 是测试具体的某一个值,如果需要测试对象,需要用到toEqual 

test(‘object assignment‘, () => {
  const data = {one: 1};
  data[‘two‘] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

toEqual是通过递归检查对象或数组的每个字段。你也可以自己实现一个来测试:

test(‘adding positive numbers is not zero‘, () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

 第二种:真实性匹配,比如:对象是否为null,集合是否为空等等

在测试中,您有时需要区分undefined、null和false,但有时希望以不同的方式处理这些问题,Jest帮助你明确您想要什么。比如:

  • toBeNull 仅当expect返回对象为 null时
  • toBeUndefined 仅当返回为 undefined
  • toBeDefined 和上面的刚好相反,对象如果有定义时
  • toBeTruthy 匹配任何返回结果为true的
  • toBeFalsy 匹配任何返回结果为false的

代码示例:

test(‘null‘, () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test(‘zero‘, () => {
  const z = 0;
test(‘two plus two‘, () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

自己可以运行一下上面代码就可以知道每一个匹配器具体的规则是什么。选择什么样的规则依赖于你期望的想要验证什么样的结果。

第三种:数字型匹配

  这种匹配规则非常语义化,不需要解释都能看得懂,示例代码如下:

test(‘two plus two‘, () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

需要注意的是对于float类型的浮点数计算的时候,需要使用toBeCloseTo而不是 toEqual ,因为避免细微的四舍五入引起额外的问题。

test(‘adding floating point numbers‘, () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3);           This won‘t work because of rounding error
  expect(value).toBeCloseTo(0.3); // This works.
});

最开始看这段代码的时候有一点疑惑,为什么0.1 + 0.2 不等于 0.3 ,查阅资料后发现几乎所有的语言中浮点数计算的时候都存在这样的问题

如果大家有兴趣可以去这里查看:http://u3xyz.com/detail/28 或者更专业的解释:http://0.30000000000000004.com/

第四种:字符型匹配

使用 toMatch  匹配规则,支持正则表达式匹配

test(‘there is no I in team‘, () => {
  expect(‘team‘).not.toMatch(/I/);
});

test(‘but there is a "stop" in Christoph‘, () => {
  expect(‘Christoph‘).toMatch(/stop/);
});

 第五种:数组类型匹配

使用 toContain 检查是否包含

const shoppingList = [
  ‘diapers‘,
  ‘kleenex‘,
  ‘trash bags‘,
  ‘paper towels‘,
  ‘beer‘,
];

test(‘the shopping list has beer on it‘, () => {
  expect(shoppingList).toContain(‘beer‘);
}); 

第六种:异常匹配

如果想要测试function是否会抛出特定的异常信息,可以用 toThrow 规则

function compileAndroidCode() {
  throw new ConfigError(‘you are using the wrong JDK‘);
}

test(‘compiling android goes as expected‘, () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(ConfigError);

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow(‘you are using the wrong JDK‘);
  expect(compileAndroidCode).toThrow(/JDK/);
});

写在最后

  本文仅仅只是介绍了几种常用的匹配器,如果想要了解更多可以参考官方API 文档

目前的项目中刚开始使用Jest,看到国内关于Jest的中文文档并不是很多,所以就想写一个系列介绍给大家,大部分内容是从官方文档中翻译过来,如果有任何不准确的地方希望大 家能指出来,我将非常及时的更改。

  如果觉得本文对您有用,麻烦动动手指推荐一下,谢谢。

下一节内容将介绍:Jest如何测试异步代码,敬请期待

时间: 2024-11-07 19:34:42

前端测试框架Jest系列教程 -- Matchers(匹配器)的相关文章

前端测试框架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系列教程 -- Mock Functions

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

前端测试框架

一.为什么要进行测试? 一个 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 使用默认配