网上很多都是用vue-cli新建项目,生成的结构内容很复杂,反正我是看着头很晕的,不知道你们是不是,所以试着自己在vue项目添加测试。现在前端的各种工具更新太快了,网上好多教程都有坑,所以想自己记录下来。
vue官网给的例子用的是karma + mocha + chai。
- karma:Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。
- mocha:mocha是一个基于nodejs和浏览器集合的各种特性的JavaScript测试库。
- chai:chai是一个基于nodejs的断言库,并且完美支持各种主流的JavaScript测试框架。。
新建项目
vue安装环境不说了,网上一抓一大把,不会的同学移步到Vue2.0 新手完全填坑攻略——从环境搭建到发布
我们选择简易版生成vue项目
vue init webpack-simple npm-karma
目录结构
hello.vue
<template>
<div>
<h1>{
{
title}}</h1>
</div>
</template>
<script>
export default {
data () {
return {
title: 'hello world'
}
}
}
</script>
安装karma
全局安装karma-cli
npm install karma-cli -g
进入项目目录下执行
karma init
这里选择vue推荐的mocha,根据上下键来进行选择,然后回车就好。
这里选择no
这里选择phantomJS,注意PhantomJS需要提前安装在电脑上,当然选择Chrome更方便
填写测试脚本存放位置,支持通用匹配。我们可以后面手动填写。选择空,回车
是否有需要排除的符合前面格式的问文件,选择空,回车
选择自动监测测试。选择yes
接下来项目根路径会有一个karma.config.js文件。
安装依赖
这时候我们的项目中的依赖如下:
我们已经选择了mocha作为测试库,还需要安装mocha和karma-mocha
浏览器选择了phantomjs,这里我们还需要安装 karma-phantomjs-launcher
使用webpack打包,还需要安装karma-webpack,extract-text-webpack-plugin
使用chai作为断言库,需要安装chai、sinon-chai、sinon、karma-sinon-chai
npm install karma-webpack karma-mocha chai sinon-chai sinon karma-sinon-chai karma-phantomjs-launcher extract-text-webpack-plugin mocha –save-dev
修改配置
karma配置中需要引入webpack配置,我们新建一个专门配置的文件夹存放所需的配置,
如下图,在项目根目录下新建了一个config文件夹
webpack.test.config.js
var path = require("path")
var webpack = require("webpack")
var ExtractTextPlugin = require('extract-text-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, '..', di