vue单元测试安装依赖

发布时间：2020-12-14 05:00:15 所属栏目：百科来源：网络整理

导读：Karma 是一个基于Node.js的Javascript测试执行过程管理工具。该工具可用于测试所有主流web浏览器，也可集成到CI工具，也可以和其他代码编辑器一起使用，它可以监听文件的变化，然后自动执行。安装Karma环境 npm install -g karma 为了方便搭建karma环境，

Karma 是一个基于Node.js的Javascript测试执行过程管理工具。该工具可用于测试所有主流web浏览器，也可集成到CI工具，也可以
和其他代码编辑器一起使用，它可以监听文件的变化，然后自动执行。

安装Karma环境

npm install -g karma

为了方便搭建karma环境，我们可以全局安装karma-cli来帮我们初始化测试环境

npm install -g karma-cli

我们在项目的根目录下也需要安装一下，如下命令：

npm install karma --save-dev

先来安装一下依赖的插件如下：

1. 需要可以打开chrome浏览器的插件 npm install karma-chrome-launcher --save-dev
2. 需要可以运行jasmine的插件 npm install karma-jasmine jasmine-core --save-dev
3. 需要可以运行webpack的插件 npm install karma-webpack webpack --save-dev
4. 需要可以显示的sourcemap的插件 npm install karma-sourcemap-loader --save-dev
5. 需要可以显示测试代码覆盖率的插件 npm install karma-coverage-istanbul-reporter --save-dev
6. 需要全局安装 jasmine-core 如命令：npm install -g jasmine-core

如下一键安装命令：

npm install --save-dev karma-chrome-launcher karma-jasmine karma-webpack karma-sourcemap-loader karma-coverage-istanbul-reporter

也需要全局安装一下 jasmine-core,如下代码：

npm install -g jasmine-core

代码覆盖率是在测试中运行到的代码占所有代码的比率。因此接下来我们在Karma环境中添加Coverage。
在项目的根目录下，运行如下命令进行安装

npm install --save-dev karma-coverage

然后需要在配置文件 karma.conf.js 代码配置如下：

 1 module.exports = function(config) {
 2   config.set({
 3 
 4     // base path that will be used to resolve all patterns (eg. files,exclude)
 5     basePath: ‘‘, 6 
 7     // frameworks to use
 8     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 9     frameworks: [‘jasmine‘],10 
11 
12     // list of files / patterns to load in the browser
13     files: [
14       /* 注意：是自己添加的 */
15       ‘src/**/*.js‘,16       ‘test/**/*.js‘
17     ],18 
19 
20     // list of files / patterns to exclude
21     exclude: [],22 
23 
24     // preprocess matching files before serving them to the browser
25     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
26     /* 覆盖源文件 不包括测试库文件*/
27     preprocessors: {
28       ‘src/**/*.js‘: [‘coverage‘]
29     },30     
31 
32     // test results reporter to use
33     // possible values: ‘dots‘,‘progress‘
34     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
35     reporters: [‘progress‘,‘coverage‘],36     
37     /* 新增的配置项 */
38     coverageReporter: {
39       type: ‘html‘,40       dir: ‘coverage/‘
41     },42 
43     // web server port
44     port: 9876,45 
46 
47     // enable / disable colors in the output (reporters and logs)
48     colors: true,49 
50 
51     // level of logging
52     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
53     logLevel: config.LOG_INFO,54 
55 
56     // enable / disable watching file and executing tests whenever any file changes
57     autoWatch: true,58 
59 
60     // start these browsers
61     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
62     browsers: [‘Chrome‘],63 
64 
65     // Continuous Integration mode
66     // if true,Karma captures browsers,runs the tests and exits
67     singleRun: false,68 
69     // Concurrency level
70     // how many browser should be started simultaneous
71     concurrency: Infinity
72   })
73 }

View Code

webpack和Babel集成Karma环境中。

在项目中，会使用到webpack和es6，因此需要集成到karma环境中。
安装karma-webpack

npm install --save-dev karma-webpack webpack

1.安装babel核心文件 npm install babel-core --save-dev
2. webpack的Loader处理器 npm install babel-loader --save-dev
3. babel的istanbul覆盖率插件 npm install babel-plugin-istanbul --save-dev
4. babel转换到哪个版本这里是ES2015 npm install babel-preset-es2015 --save-dev

一键安装命令如下：

npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-plugin-istanbul

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!