使用 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