前端测试框架mocha初体验

最近在同事的推荐下了解到重构，重构的主要目的是让代码更容易理解，代码更容易扩展。

但在重构的过程中为了保证重构后的代码表现与之前的一致，需要加入js单元测试。

前端单元测试框架选择

在对比了jest和mocha之后，我选择了mocha。

mocha的生态圈更好，使用的人数更多。我也只用了mocha，这里就简单列一下mocha的时候。话不多说上流程

// 安装依赖
$npm install mocha --save -dev 
// 或者全局安装
$npm install mocha -g 

在根目录添加test文件夹用来保存test文件，测试文件一般以xxx.test.js命名。

在package.json文件中的script中加入

// 全局依赖时
"test": "mocha"
// 局部安装时
"test": "node node_modules/mocha/bin/mocha"

到现在为止就可以运行了

结果展示

但是，重点往往在这里。

当我们引入前端框架之后你就回发现测试运行不了；

这个是es6报错。

你需要装对应的Babel

$npm install babel-preset-es2015 --save-dev

$npm install babel-preset-react --save-dev

$npm install babel-preset-stage-0 --save-dev

then配置.babelrc文件

{
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ]
}

在package.json文件中的script标签中

"test": "node node_modules/mocha/bin/mocha --require babel-core/register"

再次运行后含有es6和jsx语法的测试就不会报错了。

到这里一个简单的开始就结束了。