前端測試框架Jest系列教程 -- Matchers（匹配器）
寫在前面：
匹配器（Matchers）是Jest中非常重要的一個概念，它可以提供很多種方式來讓你去驗證你所測試的返回值，本文重點介紹幾種常用的Matcher，其他的可以通過官網api文檔查看。
常用的匹配方式：
第一種：相等匹配，這是我們最常用的匹配規則
test(‘two plus two is four‘, () => {
expect(2 + 2).toBe(4);
});
在這段代碼中 expact(2 + 2) 將返回我們期望的結果，通常情況下我們只需要調用expect就可以，括號中的可以是一個具有返回值的函數，也可以是表達式。後面的 toBe
這樣的輸出結果非常易於我們去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僅當返回為undefinedtoBeDefined和上面的剛好相反，對象如果有定義時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如何測試異步代碼，敬請期待
前端測試框架Jest系列教程 -- Matchers（匹配器）