前端測試驅動開發模式(TDD)快速入門

測試驅動開發（Test-Driven Development）是一種軟件開發的思維和方法，我的理解是它是一種開發的循環，先寫測試代碼，再用最小的代碼實現這個測試，再繼續寫測試代碼，繼續用最小的代碼實現。當實現所有的測試用例，代碼也就完成了。

最近也在實踐Tdd開發，和之前先開發，再自測的方向不同，這次的開發順序是， 文檔--->測試用例--->代碼--->測試通過--->下一個測試用例。這樣做有以下優缺點：

優點

• 在開始可以比較明確自己要做什么，把錯誤暴露在整個開發流程比較靠前的位置，修改的成本也比較小
• 在之后對代碼優化的過程中，因為有測試代碼的存在，可以更好的優化代碼，優化完之后再執行一遍代碼，而不用擔心優化過程中又出錯
• 通過測試代碼，可以幫助理清楚程序中關鍵點
• 也更有利于之后的維護

缺點

• 加上測試的代碼，會適當增加一些工作量
• 可能會測的不全面

總體來說，如果對一些基數設施的建設，比如基礎組件等，需要長期維護的項目，Tdd的應用，還是利大于弊。

前端TDD開發環境的搭建

如果想應用Tdd的方法到前端的開發中，主要用到以下幾個工具（工具的用法在后面介紹）：

mocha.js

mocha 主要提供了describe的語法，用來描述測試用例，并且把執行測試后的結果清楚的返回到終端上。

官網：mochajs.org

github: github.com/mochajs/moc…

chai.js

chai 主要提供了斷言函數assert,用來斷言和比較測試的結果和代碼執行的結果。

官網:www.chaijs.com/

github: github.com/chaijs/chai

assert庫方法文檔： www.chaijs.com/api/assert/…

sinon.js

sinon 主要用來mock一些東西，比如可以用sinon mock一個假的函數，sinon也可以返回這個函數執行與否。

官網:sinonjs.org

github: github.com/sinonjs/

基礎環境搭建

先npm init生成一個項目。 再執行以下安裝語句：

npm install sinon moncha chai sinon-chai --save-dev
復制代碼

建立一個test文件夾，可以把寫測試用例的Js放在這個文件夾中， 為了可以方便執行單元測試，可以加一個npm scripts，在package.json的scripts中加入如下語句，表示使用mocha去執行test文件夾下的js測試：

"scripts":{
  "test": "mocha test/**/*.js"
}
復制代碼

在test中建立一個js文件，在文件的中引入這些工具，為了連接sinon 和 chai,要使用到sinon-chai

const chai = require("chai")
const sinon = require("sinon")
const sinonChai = require("sinon-chai")
chai.use(sinonChai)
const assert = chai.assert // 從chai中引出assert
復制代碼

如何實施TDD

如何寫一個單元測試

首先我們看一個簡單的單元測試代碼：

describe('測試navigateTo方法', ()=>{
  it("new router后存在navigateTo方法", ()=>{
    let newRouter = new VictRouter()
    assert.isFunction(newRouter.navigateTo)
  })
})
復制代碼

• describe()表示測試的一個大范圍，第一個參數是范圍的名字，第二個是一個回調函數，其中可以放單元測試代碼
• it()里寫單元測試的代碼，第一個參數還是這個測試的名字，第二個回調函數中放入單元測試代碼
• assert 就是斷言代碼執行后的結果是什么，比如這個例子中，因為要測試"實例化后存在navigateTo方法"，就斷言new之后的實例包含navigateTo這個函數，所以用到了assert的isFunction的方法
• 寫完之后運行npm run test, 就能看到測試的運行結果了，如果沒有報錯就是測試成功了

如何寫多個單元測試代碼：

直接在describe中加入多個it函數即可：

describe('測試navigateTo方法',()=>{
    it(`new router 后存在navigateTo方法`, ()=> {
      let newRouter = new VictRouter()
      assert.isFunction(newRouter[key])
    })
  it(`navigateTo的入參類型必須為object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')}
    assert.throws(badFn, 'this.commonDirectFn is not a function')
  })
})
復制代碼

npm run test之后可以執行所有的測試

一般的測試思路

• 可以先從最簡單的開始測試，比如存在某個方法，入參的類型等等
• 最好是先寫測試用例，再寫業務代碼
• 用盡量小的成本實現測試

善用throw拋出錯誤

在執行的代碼中，特別在開始一些對入參的判斷的代碼，可以使用throw出錯誤，再用assert捕獲這個錯誤，這樣可以比較方便的測試入參是否符合預期。但是使用assert.throws的時候，要用一個函數包裝要測試的代碼：

it(`navigateTo的入參類型必須為object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')} // 這里用一個函數包裝
    assert.throws(badFn, 'this.commonDirectFn is not a function') // 再把包裝后的函數傳入throws
  })
復制代碼

使用sinon模擬函數

如果需要模擬一個函數，可以用sinon去模擬，使用方法：sinon.fake()，并且課已通過這個sinon的called方法判斷函數是否被執行。

let fn = sinon.fake() //生成一個模擬函數
assert(fn.called) //斷言這個函數是否被執行
復制代碼

小結

本文只是對Tdd的一個簡單介紹，適用于快速入門。mocha,chai,sinon的一些高級的用法，還需要通過實踐去學習。 另，本文只是對但純js的測試，react,vue和小程序都有他們自己的ui測試的方案。 想通過本文，讓大家可以簡單了解Tdd，并且學到一種新的思路去寫代碼。

原文轉自：https://juejin.im/post/5d7710bae51d453bb13b66b0