小结下前端的持续集成（istanbul, mocha, babel, etc）

发表于 | 分类于 |

这是必要而又自然的，首先我们要保证自己的基础库的回归测试的自动化（或者少修改），其次在选择开源库的时候，有着测试100%pass的库总会让别人多一点信心不是么？！

一个笔记而已，不必写过多的原因及背景。

简而言之：我想写 es6 语法的基础库，又要确保相应的测试神马的能够正常的 cover 住，而且需要在依赖其他的 es6 语法库的时候能够让测试正常运行，做了一点工作，所以记下笔记以便后续直接用。

库选择

测试库mocha

很正常的选择。

官网
Github

断言库chai

说实话我也没想那么多，mocha官网用了就直接用了而已，其实本身并不在意是chai还是jasmine……

官网
Github

覆盖率nyc

实际上还是istanbul，nyc是做了些增强：

  • applications that spawn subprocesses.
  • ES2015 transforms, via babel-plugin-istanbul, or source-maps.

官网
Github

持续集成Travis CI

官网

覆盖率持续集成coveralls

for coveralls.io

Coveralls官网
Github

项目中的使用

安装

在进行了必要的项目初始化之后（npm init ?），就可以准备持续集成相关的东西了。

1
npm i --save-dev mocha chai nyc coveralls babel-cli cross-env

如果需要 es6 等支持，还需要安装

1
npm i --save-dev babel-cli babel-register babel-plugin-istanbul babel-preset-es2015-node5

cross-env用于跨平台的设置 NODE_ENV=test

选用 preset es2015-node5 的原因则是，测试都是在 node 下进行的，而 node 在原生类被babel编译的类继承时会抛异常，所以使用这个preset。

babel配置

如果安装了，则新增 .babelrc 于根目录，然后配置：

1
2
3
4
5
6
7
8
9
10
11
12
{
    "presets": [
        "es2015-node5"
    ],
    "env": {
        "test": {
            "plugins": [
                "istanbul"
            ]
        }
    }
}

测试

首先，测试的文件默认都在根目录下的 test 文件夹中，源文件默认在 lib 文件夹中，这时候其实不需要做过多的配置的，只有几个注意点而已：

  1. test中的文件命名，最好保留源文件名，或用.test.js后缀，以便维护
  2. 如果过多了，可以考虑源文件名做文件夹，然后 [feature].test.js，.test依然可选
  3. test中的文件如果是多层，mocha的参数要有 –recursive，去找更深层目录的文件

修改：

1
2
3
4
5
6
7
8
9
// 在 package.json 中，增加命令：
{
    "script": {
        "test": "./node_modules/.bin/mocha --recursive"
    }
}
// 执行
npm test

覆盖率

修改：

根目录增加 .nycrc，用于配置nyc，这是一个json文件

1
2
3
4
5
6
7
8
9
{
  "reporter": ["text", "text-summary", "lcov"],
  "include": ["lib/*.js"],
  "require": ["babel-register"],
  "sourceMap": false,
  "instrument": false,
  "all": true,
  "report-dir": "./test/coverage"
}

// 执行
npm run cover

1
2
更新下 .gitignore

Coverage directory used by tools like istanbul

coverage
.nyc_coverage
.nyc_output

1
2
3
4
5
6
7
8
9
10
然后增加命令，以便执行
```javascript
// 在 package.json 中，增加命令：
{
    "script": {
        "cover": "cross-env NODE_ENV=test --reporter=lcov --reporter=text mocha"
    }
}

持续集成

for Travis CI…

创建文件 .travis.yml

1
2
3
4
5
6
7
8
9
10
11
12
language: node_js
node_js:
    - 7.6
install:
|
    npm install -g npm@latest
    npm --version
    npm install --registry http://registry.npmjs.org
script:
    - npm run cover
after_script:
    - npm run coveralls

对了，package.json的script加一个 coveralls

1
2
3
4
5
6
// 在 package.json 中，增加命令：
{
    "script": {
        "coveralls": "cat ./coverage/lcov.info | coveralls"
    }
}

OK.