import Vue from 'vue'
Vue.config.productionTip = false
// 测试所有以 .spec.js 名称结尾的文件
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// 要求除main.js之外的所有src文件进行覆盖
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
4、简单的 vue 组件单元测试
我们在 src 目录下创建一个 Hello.vue 组件
<template>
<div>msg</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
这里我记录下搭建基于 karma+mocha+webpack3+vue2 的测试环境。因为之前折腾了一段时间,发现的坑挺深的,防止后面再次掉进坑里,留个笔记。如果这边文章能解决大家遇到的问题那就更好了😉
1、需要安装哪些包
babel 相关的:
babel-core
babel-plugin-syntax-jsx // 支持 jsx 语法
babel-plugin-transform-runtime // 描述太晦涩, 官方文档: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime
babel-plugin-transform-vue-jsx // 支持 vue2.x jsx 语法
babel-preset-env // 可以根据您所支持的环境自动确定您需要的Babel插件和polyfills(.babelrc 配置)
babel-preset-es2015
babel-preset-stage-2
babel-runtime
babel-polyfill // 支持老版本浏览器
karma、mocha、断言 包
karma
mocha
chai // BDD 、TDD 断言框架
chalk // 终端里可以给输出内容添加颜色
karma-mocha
karma-coverage // 生成代码覆盖率
karma-phantomjs-launcher // phantomjs 启动器
karma-phantomjs-shim // 可以支持 phantomjs 默认不支持的功能,如
Object.assign
等...karma-sinon-chai
karma-spec-reporter // 终端里输出测试结果
karma-webpack // karma 支持 webpack 插件,有了它就不会报
找不到requirejs
的错误信息了phantomjs-prebuilt // phantomjs 通过 npm 安装的版本
sinon // 测试辅助工具,提供 spy、stub、mock 三种测试手段,模拟特定场景
sinon-chai
webpack 相关
webpack
babel-loader
css-loader
istanbul-instrumenter-loader // 代码覆盖率统计工具
karma-sourcemap-loader
style-loader
url-loader
vue-loader
vue-style-loader
extract-text-webpack-plugin
vue 核心包
2、如何配置
上面那么一大坨包安装好了,接下来该配置。配置主要是两个,一是 karma 的配置文件,另一个是 karma 需要的webpack 配置文件。webpack 的配置文件是为了解析那些需要测试的源文件的,说白了就是 vue 相关的文件,然后再给karma 的单元测试用例去识别。
webpack3 配置文件 我是手动创建一个webpack.test.config.js 文件,然后内容配置如下
karma配置文件
直接
cd
到你的项目,然后执行下面命令,会提示你是否使用 require.js、浏览器环境、测试脚本存放位置等等。之后就会生成一个karma.config.js 文件,配置形式我是直接仿照vue-cli 官方的例子:
3、搭建目录结构
测试文件相关都放置在 test/unit 下,入口文件为 index.js,每个vue 组件对应的测试用例名为
组件名称.spec.js
,根据istanbul-instrumenter-loader
文档的说明,测试总入口文件 index.js 内容如下:4、简单的 vue 组件单元测试
我们在 src 目录下创建一个
Hello.vue
组件然后在 test/unit/specs 下创建一个
Hello.spec.js
文件,再写个简单的单元测试用例:5、测试输出
在 package.json 中配置命令:
输出结果:
同时在 test/unit/coverage 生成测试报告。以上就是一个简单的 vue 单元测试实例。最后奉上源代码