JavaScript單元測試及原理

單元測試及原理

單元測試是指對軟體中的最小可測試單元進行檢查和驗證，通過單元測試可以檢測出潛在的bug，還可以快速反饋功能輸出，驗證程式碼是否達到預期，也可以保證程式碼重構的安全性。

有這樣一個方法：

let add = (a, b) => a + b;
複製程式碼

這是一個很簡單的計算兩個數的和的方法，假如我們想看看他的邏輯對不對，我們可以呼叫一下，然後跟我們預期的一個值比較下，如果不符合就丟擲一個錯誤：

let add = (a, b) => a + b;
let result = add(1, 2);
let expect = 3;
if(result !== expect){
  throw new Error(`1+2應該等於${expect},實際等於${result}`)
}
複製程式碼

這其實就是單元測試的原理，但是這裡寫的方法太直白，而且不能複用，讓我們改造下expect，把它變成一個通用方法：

const expect = (res) => {
  return {
    toBe: (expectRes) => {
      if(res !== expectRes){
        throw new Error(`期望值是${expectRes}，但實際上卻是${res}!`)
      }
    }
  }
}
複製程式碼

我們前面期望1+2=3，這其實就是一個單元測試用例，當我們有多個用例的話，我們可以用一種更通用優雅的方式來寫用例，我們來寫一個通用用例方法：

const test = (desc, fn) => {
  try{
    fn();
    console.log(`${desc} -> PASS`)
  }catch(e){
    console.error(`${desc} -> FAIL`, e);
  }
}
複製程式碼

我們用這兩個通用方法來改寫下我們的單元測試：

let add = (a, b) => a + b;

const expect = (res) => {
  return {
    toBe: (expectRes) => {
      if(res !== expectRes){
        throw new Error(`期望值是${expectRes}，但實際上卻是${res}!`)
      }
    }
  }
}

const test = (desc, fn) => {
  try{
    fn();
    console.log(`${desc} -> PASS`)
  }catch(e){
    console.error(`${desc} -> FAIL`, e);
  }
}

test('1+2=3', () => {
  expect(add(1,2)).toBe(3); // 1+2=3 -> PASS
});

test('1+2=4', () => {
  expect(add(1,2)).toBe(4); // 1+2=4 -> FAIL Error: 期望值是4，但實際上卻是3!
});
複製程式碼

上面介紹的是單元測試的原理，事實上在我們寫單元測試的時候並不需要自己寫expect和test公用方法，需要用到的比對方法也遠遠不止toBe一個。我們可以直接用第三方庫Jest，他包含了幾乎所有我們需要的工具，使用方法官網都有，這裡主要講原理，使用方法不再贅述。