自动化单元测试(Karma + Mocha)

Posted gitnull

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自动化单元测试(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}AppDataRoaming pm”),注意一定要把这个路径放在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







以上是关于自动化单元测试(Karma + Mocha)的主要内容,如果未能解决你的问题,请参考以下文章

不能在我的mocha测试中使用需求通过gulp与karma runner

在vue-cli生成的项目中使用karma+chrome进行单元测试

前端测试 karma mocha should 都是什么鬼?

前端js单元测试 使用mochachaisinon,karma

如何使用 Karma (testacular) 测试 nodejs 后端代码

Karma 与测试框架 Jasmine、Mocha、QUnit [关闭]