前端進階課程之單元測試

沉默抒懷者發表於2018-11-05
前端

目錄：

  • 為什麼要學習單元測試以及使用場景？
  • node assert 以及常用斷言庫：should.js, expect.js , chai.js
  • mocha - 基於javascript的單元測試框架
  • karma - 自動化測試工具
  • travis.CL - 持續整合工具

1：為什麼學習單元測試？

首先要說明：一直以來，單元測試在前端開發中好像並不會被重視，也不是前端開發專案所必須的，所以這也就導致很大一部分前端對於單元測試這塊並沒有很重視或者瞭解，隨著前端開發越來越複雜，而且javascript本身是一個弱型別語言，要想及時發現隱藏的一些錯誤，單元測試就變得越來愈重要，那麼這次就帶大家看看，前端開發中的單元測試到底是個什麼東東？ 在我們沒有運用單元測試之前，在專案中是怎麼測試程式碼呢？不用說，大家也能想到console.log 還有debug模式，但是這種去測試程式碼，很顯然效率太低，每次測試都需要我們手動去console.log所需要列印的東西，那麼，隨著前端開發越來越複雜，就湧現了一些專屬於前端的測試框架，這樣我們只需要在專案去整合這些框架就可以實現測試。 那麼具體單元測試可以時候使用呢？ 業務程式碼不能使用單元測試，因為需求程式碼頻繁變更，通常是寫一些元件庫或者工具類的程式碼可以使用單元測試，例如我們常使用的元件庫，iview，它的每個元件肯定都有對應的測試用例。

2：node assert 斷言的使用

這裡，說明一下斷言的作用：即通過這些斷言我們可以判斷程式碼的執行結果是否與我們期望的結果一致，如果一致，那麼程式碼正常執行，如果不一致，則報錯提示，這就是斷言的作用，assert是node中的斷言模組，除此之外，還有像should.js， expect.js ，chai.js等都是一些開源的斷言庫，讓斷言程式碼更加友好，便寫。 參考文章：zhouqing86.github.io/2017/04/07/…

3: mocha的使用

1: 我們直接使用斷言去測試程式碼有什麼問題呢？ 如果我們同時測試多段程式碼，那麼如果某段程式碼斷言報錯，那麼之後的測試就無法進行，而且整個程式碼的測試都需要手動去執行js程式碼，如何能夠自動化執行測試程式碼，而且不會阻塞呢？mocha就是一個很好的基於js的測試框架。

2: mocha的基本使用

  • 第一步： 新建專案mocha-demo, 然後執行：cd mocha-demo , 進入目錄， 執行 npm init 命令生成package.json檔案。
  • 第二步：npm install mocha --save-dev
  • 第三步：新建test目錄，然後我們所有的測試用例都放在該目錄一下，執行mocha命令的時候，預設會執行test目錄下的所有檔案，進行測試
  • 第四步：編寫具體的測試用例，具體格式為： 說明：describe用來定義一個測試模組，一個模組裡可以巢狀很多子模組，也可以包含多個測試用例，而it用來表示一個測試用例。
const assert = require('assert');
const sum = require('../js/sum');

describe('求和', () => {
    it('sum() should return 0', () => {
        assert.strictEqual(sum(), 0);
    })
    it('sum(1) should return 1', () => {
        assert.strictEqual(sum([1]), 1);
    });

    it('sum(1, 2) should return 3', () => {
        assert.strictEqual(sum([1, 2]), 3);
    });

    it('sum(1, 2, 3) should return 6', () => {
        assert.strictEqual(sum([1, 2, 3]), 6);
    });
});
複製程式碼

4: karma 的出現

這是一個自動化測試工具，可以為我們的測試提供更好的服務，例如，程式碼修改後，自動進行測試，或者可以指定測試環境，是執行在哪個瀏覽器中等，所以karma的作用就是配合mocha為我們的測試提供一個更快捷友好的測試環境。

karma的基本使用：

  • 第一步：新建專案karma-demo, 然後執行：cd karma-demo , 進入目錄， 執行 npm init 命令生成package.json檔案。
  • 第二步： npm install karma --save-dev
  • 第三步：執行karma init,生成karma.conf.js，該檔案配置了測試相關所需要的環境。
  • 第四步：執行karma start命令，然後就會根據karma.conf.js裡面的配置，測試相關檔案（這裡省略了具體的測試程式碼和用例，通常在test目錄下）

5: travis持續整合工具

travis 是一個持續整合的服務，繫結了github指定的專案，然後只要git上程式碼有改動或者提交，那麼travis都會自動拉去最新程式碼，然後重新執行，執行測試，自動部署（總結起來：自動構建，自動測試，自動部署） 常見問題： 1: 超過10分鐘，自動報錯，解決方法：設定singleRun為true 2: 在travis中沒有chrome導致執行報錯

6: 總結

通常已上介紹，大致已經瞭解了各個框架或者工具的作用，總結下來就是, 使用mocha測試框架，書寫測試程式碼，程式碼中使用assert斷言或者其他斷言庫去進行斷言，然後在配合karma去更好的執行測試程式碼。最後，通過travis形成整個閉環，以後只要修改程式碼，然後本地自動測試，測試通過以後，提交到git上以後，travis自動拉取，重新進行執行測試構建，那麼所有的流程走完以後，所以此時此刻git上的程式碼是比較穩定，同時測試的程式碼。

7: vue中單元測試實踐

我們平時開發中，可能比較多的使用react和vue框架來實現專案，那麼如何在這些框架中實現單元測試呢？ 此處以vue為例，說明；

  • 第一步：執行命令：mkdir vue-demo， 然後 cd vue-demo , 執行 vue init pwa 生成專案模版（前提是安裝了vue-cli），這個過程就會讓我們選擇是否配置karma和mocha，我們選擇yes. 然後npm install 所有依賴，最後npm run dev啟動本地服務
  • 第二步：安裝完成以後，測試專案用例寫在test目錄下，執行npm run unit 既可以檢測測試用例是否通過。

參考文件：

相關文章