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

Gping發表於2019-02-26
前端框架

使用匹配器

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

普通匹配器

最簡單的測試值的方法就是看是否精確匹配。首先是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
複製程式碼

相關文章