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

原文地址:https://www.cnblogs.com/gitnull/p/10129149.html

时间: 2024-10-02 20:12:42

自动化单元测试(Karma + Mocha)的相关文章

Karma和Jasmine自动化单元测试

前言 在Java领域,Apache, Spring, JBoss 三大社区的开源库,包罗万象,但每个库都在其领域中都鹤立鸡群.而Nodejs中各种各样的开源库,却让人眼花缭乱,不知从何下手. Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理.Java领域:JUnit做单元测试, Maven自动化单元测试,统一项目管

结合angularjs,Karma和Jasmine自动化单元测试

前言 在Java领域,Apache, Spring, JBoss 三大社区的开源库,包罗万象,但每个库都在其领域中都鹤立鸡群.而Nodejs中各种各样的开源库,却让人眼花缭乱,不知从何下手. Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理. Java领域:JUnit做单元测试, Maven自动化单元测试,统一项目

大前端的自动化工厂(5)—— 基于Karma+Mocha+Chai的单元测试和接口测试

一. 前端自动化测试 大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多人维护同一份代码,经常会出现有些函数莫名其妙地结果不对了,或者某个接口的入参变了,又或者哪位大哥把后端返回的数据结构给改了.每天工作的时间里被拉来拉去帮人定位问题,结果花了很多时间却发现大部分都是别人的锅.每当遇到项目上线,那就更热闹了,跟着其他"人肉测试机"大家一起点点点...... 很

Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透! Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代

javascript 自动化单元测试

#JavaScript 自动化单元测试 - 为什么要进行自动化测试? - 什么项目适合做自动化测试? - 测试运行器 karma - 测试框架 jasmine ### 为什么要进行自动化测试? 1. 正确性:验证代码的正确性 2. 自动化:一次编写,多次运行 3. 解释性:阅读测试用例,有时比文档说明更清晰 4. 驱动开发:快速反馈提高开发效率 5. 保证重构:测试用例做后盾,就可以大胆的进行重构持续集成 ### 什么项目适合做自动化测试? 自动化的收益 = 迭代次数 * (全手动执行成本 -

自动化单元测试

好几天没有写博了,今天也有些懒懒地. 标个签吧. 单元测试 http://www.cnblogs.com/Chinasf/archive/2008/03/07/1094334.html 自动化单元测试实践之路 http://www.infoq.com/cn/articles/road-of-automated-unit-testing-practices 就看中自动化了. 也不知可行否. 日后检验检验.

敏捷自动化单元测试 (从前台 JavaScript 至后台 Java)

此份材料的内容适用于前台 JavaScript 与后台 Java 的单元测试? 希望, 能协助开发人员可在最短的时间内, 开展单元测试的工作? 附件: 敏捷自动化单元测试 样例代码: QUnit 样例代码: jstd 样例代码: jsmine 样例代码: Java 黑盒单元测试

前端单元测试框架-Mocha

引言 随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是'急剧上升',所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如React.Vue,因为有自己的语法规则,及时每个开发人员的编码风格规范各不相同,但最终的产出都大同小异,代码质量差距不是很大:但对于一些基础类库或方法的开发,我们就要谨慎又谨慎,代码质量一定要高,尽量避免出现Bug. 那我们如何做到产出高质量代码呢?单元测试才是正解,俗话说'跳过单元测试和不仔细过冒烟就交由QA测试的,就是在耍流氓'(这句话是我自己编的):

测者的测试技术手册:AI的自动化单元测试

测者的测试技术手册:AI的自动化单元测试 谈新技术:AI的自动化单元测试 原文地址:https://www.cnblogs.com/mrtester/p/10107939.html