前端测试框架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如何测试异步代码，敬请期待

系列教程：

　  1. 前端测试框架Jest系列教程 -- Matchers（匹配器）

　  2.前端测试框架Jest系列教程 -- Asynchronous(测试异步代码)

　  3.前端测试框架Jest系列教程 -- Mock Functions（模拟器）

　  4.前端测试框架Jest系列教程 -- Global Functions（全局函数）