自动化单元测试（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