<center>karma配置及使用</center>

一、定义

Karma不是测试框架，也不是断言库。

Karma是一个测试工具，一个允许在多个真实浏览器中执行JavaScript代码的工具，为开发人员提供高效的测试环境。

代码可能是设计在浏览器端执行的，在node环境下测试可能有些bug暴露不出来；另外，浏览器有兼容问题，karma提供了手段让你的代码自动在多个浏览器（chrome，firefox，ie等）环境下运行。如果你的代码只会运行在node端，那么你不需要用karma。

什么时候应该使用Karma？

• 想在真实浏览器中测试代码
• 想在多个浏览器（桌面，移动设备，平板电脑等）中测试代码
• 希望在开发期间在本地执行测试
• 希望在持续集成服务器上执行测试
• 希望在每次保存时执行测试
• 喜欢使用终端搞事
• 不希望你的代码测试出来变得糟透了
• 希望使用Istanbul自动生成覆盖率报告
• 希望将RequireJS用于源文件

二、配置

首先安装一个全局的karma用来初始化karma的配置

image.png

1. 你要使用哪个测试框架？
   (1) Jasmine（BDD，提供了基于网页的输出结果）
   (2) Mocha
      ①既可以测试简单的JavaScript函数，又可以测试异步代码，因为异步是JavaScript的特性之一
      ②可以自动运行所有测试，也可以只运行特定的测试
      ③可以支持before、after、beforeEach和afterEach来编写初始化代码
   (3) Qunit（Jquery）
   (4) Nodeunit（为node.js和浏览器提供简单的异步单元测试。）
   (5) Nunit（VS上的集成）
2. 是否要使用require.js？ No（AMD规范的模块化工具）
3. 是否要自动捕获任何浏览器？
   (1) Chrome
   (2) ChromeHeadless（在headless模式下运行谷歌浏览器-无头浏览器模式，用于自动化测试和不需要可视化用户界面的服务器，命令行）
   (3) ChromeCanary（可以同时安装/运行两个Chrome版本，以不同的路径安装，采用专有的图标、快捷键等，单独获得升级，并且与现有的Chrome互不干扰地运行）
   (4) Firefox
   (5) Safari
   (6) PhantomJS（基于webkit的JavaScript API，它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码）
   (7) Opera
   (8) IE
4. 源文件和测试文件的位置是什么？ './tests/unit/*.spec.js'
5. 是否应排除以前模式包含的任何文件？
6. 你想让Karma监视所有的文件并运行变更测试吗？

Karma.conf.js配置(命名：是conf，不是config)

image.png
image.png

webpack.test.config.js

image.png

Babel-loader js编译器，把浏览器不支持的js转译成浏览器支持的js
核心包

• babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
• babylon：js的词法解析器
• babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用
• babel-generator：根据AST生成代码

以ES6代码转译为ES5代码

image.png

三、安装karma的依赖

npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

image.png

四、使用

在package.json里面的scripts加上

"test:karma": "karma start"

然后运行

npm run test:karma

或者直接运行

karma start

image.png
image.png
image.png

不使用karma的情况下（同样是使用mocha）

image.png
image.png