关于如何搭建vue项目单元测试框架（基于karma运行器）

Tsingwu
494 阅读3分钟

这篇文章写于2017.07.30，所以可能有些插件或写法已经更新了，本来只是用于内部分享，现在发出来做个备份。

本文使用 karma 作为测试运行器，mocha 框架撰写测试代码，并使用 chai 作为断言库。

怎样搭建一个可以对 js、单文件组件、DOM事件等进行单元测试的vue项目？

1.安装 node 和 npm

Node官网 nodejs.org/zh-cn/ 下载安装包后安装即可，建议下稳定版8.0版本

如果电脑上装过 npm，需要 npm –v 查看一下 npm 版本，如果不是6.0的，需要更新至最新版本

npm install npm -g
2.下载 vue 官方脚手架
npm install vue-cli –g
3.下载 webpack
npm install webpack – v
4.使用官方脚手架工具创建项目
vue create vue-test

用键盘上下键选择 Manually select features 并按回车，表示使用自定义的方式创建vue项目

按下图进行选择，使用上下键移动选项，使用空格键切换选中与不选中状态

按下回车后选择需要的配置即可， 建议： Css Pre-processors 选择项目需要使用的 css 预处理器即可， Linter/Formatter 建议选择 ESLint with error prevention only，切记不要随意地选择下面其他选项，除非你确实需要使用那些标准，不然到时候编辑器满屏幕报错或者打包的时候一大堆语法报错就头疼了。 Unit Testing 选项选择 Mocha + chai 作为本项目的测试框架和断言库， 按下回车等待脚手架自动下载所有插件和依赖并创建项目文件。

5.配置 webpack、vue-loader 和 Babel
1) 下载babel套件
npm install babel-core babel-loader babel-plugin-instanbul babel-plugin-syntax-dynamic-import babel-preset-env babel-preset-stage-3 --save-dev

下载好后 package.json 会更新如下内容

"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1"

在根目录下创建 babel 配置文件 .babelrc 粘贴代码如下

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}
2)在根目录下创建 webpack.config.js 文件，具体代码见附件 webpack.config.js
6.下载 karma 及相关套件

参照 vue-test-utils 官网（vue-test-utils.vuejs.org/zh/guides/#…）

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

在根目录下创建 karma.conf.js 文件，粘贴代码如下

var webpackConfig = require('./webpack.config.js')
module.exports = function (config) {
  
  config.set({
    frameworks: ['mocha'],
    files: [
      'tests/**/*.spec.js'
    ],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    reporters: ['spec', 'coverage'],
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    browsers: ['Chrome']
  })
  
}
7.下载 cross-env 插件以配置启动选项
npm install cross-env –save-dev

在 package.json 中配置

"karma": "cross-env BABEL_ENV=test karma start --single-run"
8.安装 karma-chai 作为断言库
npm install --save-dev karma-chai
9.由于最新版的 vue-loader 不再内置 sass 处理程序，所以我们需要安装相应 loader 来解析 sass 代码
npm install style-loader --save-dev

然后在 webpack.config.js 中加入相应代码

{
  test: /\.scss$/,
  use: [
    "style-loader", // creates style nodes from JS strings
    "css-loader", // translates CSS into CommonJS
    "sass-loader" // compiles Sass to CSS
  ]
}
10.下载 vue-loader 插件

参考 vue-loader 官网 vue-loader.vuejs.org/zh/guide/#手… 在新版的 vue-loader 中，需要额外加入一个插件来解析 vue 文件，以使其能够被正确识别并打包而后交付测试

在 webpack.config.js 中加入如下代码

const VueLoaderPlugin = require('vue-loader/lib/plugin')

rules 中添加代码

plugins: [
  new VueLoaderPlugin()
]
11.运行
npm run karma

表示测试成功，并可以在 coverage 文件夹中查看报告，打开文件夹中的 index.html 即可 （下图仅以我之前做的项目为例）

avatar
文章
阅读
粉丝