前端測試框架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（全局函數）