前端測試框架Jest——語法篇

使用匹配器

使用不一樣匹配器能夠測試輸入輸出的值是否符合預期。下面介紹一些常見的匹配器。
普通匹配器
最簡單的測試值的方法就是看是否精確匹配。首先是toBe()

android

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

toBe用的是JavaScript中的Object.is(),屬於ES6中的特性,因此不能檢測對象,若是要檢測對象的值的話,須要用到toEqual。toEquel遞歸檢查對象或者數組中的每一個字段。面試

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

Truthiness正則表達式

在實際的測試中,咱們有時候須要區分undefined、null和false。如下的一些規則有助於咱們進行。數據庫

  • toBeNull只匹配null
  • toBeUndefined只匹配undefined
  • toBeDefine與toBeUndefined相反
  • toBeTruthy匹配任何if語句爲真
  • toBeFalsy匹配任何if語句爲假

數字匹配器數組

大多數的比較數字有等價的匹配器。異步

  • 大於。toBeGreaterThan()
  • 大於或者等於。toBeGreaterThanOrEqual()
  • 小於。toBeLessThan()
  • 小於或等於。toBeLessThanOrEqual()
  • toBe和toEqual一樣適用於數字 注意:對比兩個浮點數是否相等的時候,使用toBeCloseTo而不是toEqual

例子以下:async

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); }); test('兩個浮點數字相加', () => { const value = 0.1 + 0.2; //expect(value).toBe(0.3); 這句會報錯,由於浮點數有舍入偏差
  expect(value).toBeCloseTo(0.3); // 這句能夠運行
});

若是使用toBe就會產生如下結果:函數

字符串測試

使用toMatch()測試字符串,傳遞的參數是正則表達式。fetch

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('購物清單(shopping list)裏面有啤酒(beer)', () => { expect(shoppingList).toContain('beer'); });

另外

若是你想在測試特定函數的時候拋出一個錯誤,在它調用的時候可使用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/); });

測試異步代碼

在實際開發過程當中,咱們常常會遇到一些異步的JavaScript代碼。當你有以異步方式運行的代碼的時候,Jest須要知道當前它測試的代碼是否已經完成,而後它能夠轉移動另外一個測試。也就是說,測試用例必定要在測試對象結束以後纔可以結束

爲了達到這一目的,Jest有多種方法能夠作到。

回調

最多見的異步模式就是回調函數。

注意:回調函數和異步沒有必然的聯繫,回調只是異步的一種調用方式而已,不要將異步和回調兩個概念結合起來談

好比如下代碼:

// 這裏是同步執行的,徹底沒有異步
function fun1(callback) { callback(); }

如今假設一個fetchData(call)函數,獲取一些數據並在完成的時候調用call(data),而我想要測試返回的數據是否是字符串'peanut butter'

默認狀況下,一旦到達運行上下文底部,jest測試就會當即結束。這意味着這個測試將不能按照預期的進行。

function fetchData(call) { setTimeout(() => { call('peanut butter1') },1000); } test('the data is peanut butter', () => { function callback(data) { expect(data).toBe('peanut butter'); // 這裏沒有執行到 // done()
 } fetchData(callback); });

這樣作是不會報錯的,由於沒有執行到咱們想要測試的語句中的時候Jest測試已經結束了。(一旦fetchData執行結束,此測試就在沒有調用回調函數前結束,由於使用了setTimeout,產生了異步)

而咱們能夠改爲如下: 使用單個參數調用done,而不是將測試放在一個空參數的函數中,Jest會等done回調函數執行結束後,結束測試。

function fetchData(call) { setTimeout(() => { call('peanut butter1') },1000); } test('the data is peanut butter', (done) => { function callback(data) { expect(data).toBe('peanut butter'); done() } fetchData(callback); });

若是done()永遠不會被調用,則說明這個測試將失敗,這也正是咱們所但願看到的。

Promise

若是咱們的代碼中使用到了Promises,只須要從你的測試中返回一個Promise,Jest就會等待這個Promise來解決。若是承諾被拒絕,則測試將會自動失敗。

舉個例子,若是fetchData,使用Promise代替回調的話,返回值是應該解析爲一個字符串'peanut butter'的Promise。那麼咱們可使用如下方式進行測試代碼:

test('the data is peanut butter', () => { expect.assertions(1); return fetchData().then(data => { expect(data).toBe('peanut butter'); }); });

注意:必定要返回Promise,若是省略了return語句,測試將會在fetchData完成以前完成。

另一種狀況,就是想要Promise被拒絕,咱們可使用.catch方法。另外,要確保添加了expect.assertions來驗證必定數量的斷言被調用。不然一個fulfilled態的Promise不會讓測試失敗。

test('the fetch fails with an error', () => { expect.assertions(1); return fetchData().catch(e => expect(e).toMatch('error')); });

.resolves/.rejects

可使用./resolves匹配器匹配你的指望的聲明(跟Promise相似),若是想要被拒絕,可使用.rejects

test('the data is peanut butter', () => { expect.assertions(1); return expect(fetchData()).resolves.toBe('peanut butter'); }); test('the fetch fails with an error', () => { expect.assertions(1); return expect(fetchData()).rejects.toMatch('error'); });

Async/Await

若要編寫async測試,只要在函數前面使用async關鍵字傳遞到test。好比,能夠用來測試相同的fetchData()方案

test('the data is peanut butter', async () => { expect.assertions(1); const data = await fetchData(); expect(data).toBe('peanut butter'); }); test('the fetch fails with an error', async () => { expect.assertions(1); try { await fetchData(); } catch (e) { expect(e).toMatch('error'); } });

setup and teardown

寫測試的時候,咱們常常須要進行測試以前作一些準備工做,和在進行測試後須要進行一些整理工做。Jest提供輔助函數來處理這個問題。

爲屢次測試重複設置

若是你有一些要爲屢次測試重複設置的工做,可使用beforeEach和afterEach。

有這樣一個需求,須要咱們在每一個測試以前調用方法initializeCityDatabase(),在每一個測試後,調用方法clearCityDatabase()

beforeEach(() => { initializeCityDatabase(); }); afterEach(() => { clearCityDatabase(); }); test('city database has Vienna', () => { expect(isCity('Vienna')).toBeTruthy(); }); test('city database has San Juan', () => { expect(isCity('San Juan')).toBeTruthy(); });

一次性設置

在某些狀況下,你只須要在文件的開頭作一次設置。這種設置是異步行爲的時候,你不太可能一行處理它。Jest提供了beforeAll和afterAll處理這種狀況。

beforeAll(() => { return initializeCityDatabase(); }); afterAll(() => { return clearCityDatabase(); }); test('city database has Vienna', () => { expect(isCity('Vienna')).toBeTruthy(); }); test('city database has San Juan', () => { expect(isCity('San Juan')).toBeTruthy(); });

做用域

默認狀況下,before和after的塊能夠應用到文件中的每個測試。此外能夠經過describe塊來將將測試中的某一塊進行分組。當before和after的塊在describe塊內部的時候,則只適用於該describe塊內的測試。

好比說,咱們不只有一個城市的數據庫,還有一個食品數據庫。咱們能夠爲不一樣的測試作不一樣的設置︰

// Applies to all tests in this file
beforeEach(() => { return initializeCityDatabase(); }); test('city database has Vienna', () => { expect(isCity('Vienna')).toBeTruthy(); }); test('city database has San Juan', () => { expect(isCity('San Juan')).toBeTruthy(); }); describe('matching cities to foods', () => { // Applies only to tests in this describe block
  beforeEach(() => { return initializeFoodDatabase(); }); test('Vienna <3 sausage', () => { expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true); }); test('San Juan <3 plantains', () => { expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true); }); });

注意:頂級的beforeEach描述塊內的beforeEach以前執行,如下的例子能夠方便咱們認識到執行的順序

beforeAll(() => console.log('1 - beforeAll')); afterAll(() => console.log('1 - afterAll')); beforeEach(() => console.log('1 - beforeEach')); afterEach(() => console.log('1 - afterEach')); test('', () => console.log('1 - test')); describe('Scoped / Nested block', () => { beforeAll(() => console.log('2 - beforeAll')); afterAll(() => console.log('2 - afterAll')); beforeEach(() => console.log('2 - beforeEach')); afterEach(() => console.log('2 - afterEach')); test('', () => console.log('2 - test')); }); // 1 - beforeAll // 1 - beforeEach // 1 - test // 1 - afterEach // 2 - beforeAll // 1 - beforeEach //特別注意 // 2 - beforeEach // 2 - test // 2 - afterEach // 1 - afterEach // 2 - afterAll // 1 - afterAll

以上內容就是本篇的所有內容以上內容但願對你有幫助,有被幫助到的朋友歡迎點贊,評論。若是對軟件測試、接口測試、自動化測試、面試經驗交流。感興趣能夠關注我,咱們會有同行一塊兒技術交流哦。

相關文章
相關標籤/搜索