自動化單元測試（Karma + Mocha）

使用 Karma + Mocha作單元測試

• Karma（[ˈkɑrmə] 卡瑪）是一個測試運行器，它能夠呼起瀏覽器，加載測試腳本，而後運行測試用例
• Mocha（[ˈmoʊkə] 摩卡）是一個單元測試框架/庫，它能夠用來寫測試用例
• Sinon（西農）是一個 spy / stub / mock 庫，用以輔助測試（使用後才能理解）

---

安裝各類工具

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

 

建立 karma 配置

// 新建 karma.conf.js，內容以下
 module.exports = function (config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude)
         basePath: '', // frameworks to use
            // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
            frameworks: ['mocha', 'sinon-chai'], client: { chai: { includeStack: true } }, // list of files / patterns to load in the browser
 files: [ 'dist/**/*.test.js', 'dist/**/*.test.css' ], // list of files / patterns to exclude
 exclude: [], // preprocess matching files before serving them to the browser
            // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 preprocessors: {}, // test results reporter to use
            // possible values: 'dots', 'progress'
            // available reporters: https://npmjs.org/browse/keyword/karma-reporter
            reporters: ['progress'], // web server port
            port: 9876, // enable / disable colors in the output (reporters and logs)
            colors: true, // level of logging
            // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
 logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes
            autoWatch: true, // start these browsers
            // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
            browsers: ['ChromeHeadless'], // Continuous Integration mode
            // if true, Karma captures browsers, runs the tests and exits
            singleRun: false, // Concurrency level
            // how many browser should be started simultaneous
 concurrency: Infinity }) }

 

建立測試腳本

在 package.json 裏面找到 scripts 並改寫 scripts

 "scripts": { "dev-test": "parcel watch test/* --no-cache & karma start", "test": "parcel build test/* --no-minify && karma start --single-run" },

 

運行測試腳本

• 使用 npm run test 一次性運行，使用 npm run dev-test 進行 watch 運行
• Windows 用戶運行 npm run dev-test 時會出現 BUG，解決辦法是：

將 dev-test 對應的命令 parcel watch test/* --no-cache & karma start 分別運行，運行方式以下
新開一個 Git Bash 窗口運行 npx parcel watch test/* --no-cache
再開一個 Git Bash 窗口運行 npx karma start

---

Karma 測試運行報錯

npx報錯「Path must be a string. Received undefined」in windows解決方法

使用Windows上使用較老版本的nodejs，如何我使用的v8.9其自帶的npx的版本爲9.7，在Windows上使用會存在：「Path must be a string. Received undefined」的錯誤。經過 GitHub 上的 issue 能夠知道改問題已經在最新版的npx中解決了，能夠經過npm手動升級到最新版解決。

npm i -g npx

可是運行npx -v後咱們發現仍是老版本的npx在運行新下載的npx並無生效，這就是Windows環境變量的鍋了。安裝node時node的安裝目錄是在系統變量的path中，而node全局安裝包的目錄是在用戶的path中，系統查詢可執行文件的屬性是先查詢系統path變量，而後再查詢用戶path變量。因此node安裝目錄下的npx就覆蓋了node全局安裝目錄下的npx。解決方法是把用戶變量下path中node全局安裝的路徑複製到系統變量的path中。（若是本身沒有修改過node全局安裝目錄的話這個路徑通常是：」C:\Users{your_user_name}\AppData\Roaming\npm」),注意必定要把這個路徑放在node安裝目錄前面，由於查找是從上到下查找的。
以後就能夠開心的使用npx了。
參考原博：https://blog.yinaoxiong.cn/2018/08/19/fix-npx-erro.html

---

Karma not running unit tests due to 「No captured browser」 message

此錯誤可能意味着瀏覽器沒法找到服務器。檢查您是否能夠經過它提到的URL訪問服務器。它多是一個配置錯誤的端口號，甚至（就像個人狀況同樣），localhost配置錯誤。我想多是服務器沒有運行。
檢查您是否能夠手動訪問服務器。若是你不能， 我遇到了一樣的問題並嘗試了不少我發現的建議解決方案，但最終解決它的是刪除node_modules文件夾並經過npm install獲取全部新內容
一樣問題: Karma - Chrome failed 2 times (cannot start). Giving up