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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM