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

使用匹配器

使用不一樣匹配器能夠測試輸入輸出的值是否符合預期。下面介紹一些常見的匹配器。

普通匹配器

最簡單的測試值的方法就是看是否精確匹配。首先是toBe()

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

例子以下：

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()測試字符串，傳遞的參數是正則表達式。

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
複製代碼