使用 Karma + Mocha做單元測(cè)試
- Karma（[?kɑrm?] 卡瑪）是一個(gè)測(cè)試運(yùn)行器泳赋，它可以呼起瀏覽器屿愚，加載測(cè)試腳本，然后運(yùn)行測(cè)試用例
- Mocha（[?mo?k?] 摩卡）是一個(gè)單元測(cè)試框架/庫(kù)务荆，它可以用來寫測(cè)試用例
- Sinon（西農(nóng)）是一個(gè) spy / stub / mock 庫(kù)妆距，用以輔助測(cè)試（使用后才能理解）
安裝各種工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
創(chuàng)建 karma 配置
// 新建 karma.conf.js，內(nèi)容如下
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
})
}
創(chuàng)建測(cè)試腳本
在 package.json 里面找到 scripts 并改寫 scripts
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-minify && karma start --single-run"
},
運(yùn)行測(cè)試腳本
- 使用 npm run test 一次性運(yùn)行函匕，使用 npm run dev-test 進(jìn)行 watch 運(yùn)行
- Windows 用戶運(yùn)行 npm run dev-test 時(shí)會(huì)出現(xiàn) BUG娱据，解決辦法是：
將 dev-test 對(duì)應(yīng)的命令 parcel watch test/* --no-cache & karma start 分別運(yùn)行，運(yùn)行方式如下
新開一個(gè) Git Bash 窗口運(yùn)行 npx parcel watch test/* --no-cache
再開一個(gè) Git Bash 窗口運(yùn)行 npx karma start
Karma 測(cè)試運(yùn)行報(bào)錯(cuò)
npx報(bào)錯(cuò)“Path must be a string. Received undefined”in windows解決方法
使用Windows上使用較老版本的nodejs盅惜，如何我使用的v8.9其自帶的npx的版本為9.7中剩，在Windows上使用會(huì)存在：“Path must be a string. Received undefined”的錯(cuò)誤。通過 GitHub 上的 issue 可以知道改問題已經(jīng)在最新版的npx中解決了抒寂，可以通過npm手動(dòng)升級(jí)到最新版解決结啼。
npm i -g npx
但是運(yùn)行npx -v后我們發(fā)現(xiàn)還是老版本的npx在運(yùn)行新下載的npx并沒有生效，這就是Windows環(huán)境變量的鍋了屈芜。安裝node時(shí)node的安裝目錄是在系統(tǒng)變量的path中郊愧，而node全局安裝包的目錄是在用戶的path中朴译，系統(tǒng)查詢可執(zhí)行文件的屬性是先查詢系統(tǒng)path變量，然后再查詢用戶path變量属铁。所以node安裝目錄下的npx就覆蓋了node全局安裝目錄下的npx眠寿。解決方法是把用戶變量下path中node全局安裝的路徑復(fù)制到系統(tǒng)變量的path中。（如果自己沒有修改過node全局安裝目錄的話這個(gè)路徑一般是：”C:\Users{your_user_name}\AppData\Roaming\npm”),注意一定要把這個(gè)路徑放在node安裝目錄前面焦蘑，因?yàn)椴檎沂菑纳系较虏檎业摹?br>
之后就可以開心的使用npx了盯拱。
參考原博：https://blog.yinaoxiong.cn/2018/08/19/fix-npx-erro.html
Karma not running unit tests due to “No captured browser” message
此錯(cuò)誤可能意味著瀏覽器無法找到服務(wù)器。檢查您是否可以通過它提到的URL訪問服務(wù)器例嘱。它可能是一個(gè)配置錯(cuò)誤的端口號(hào)狡逢，甚至（就像我的情況一樣），localhost配置錯(cuò)誤蝶防。我想可能是服務(wù)器沒有運(yùn)行甚侣。
檢查您是否可以手動(dòng)訪問服務(wù)器。如果你不能间学， 我遇到了同樣的問題并嘗試了很多我發(fā)現(xiàn)的建議解決方案殷费，但最終解決它的是刪除node_modules文件夾并通過npm install獲取所有新內(nèi)容
同樣問題: Karma - Chrome failed 2 times (cannot start). Giving up
