這兩天想試一下coveralls，遂找了一個(gè)測試比較全的，使用mocha的React + Redux的Todo項(xiàng)目試驗(yàn)了一下，想著在這個(gè)基礎(chǔ)上做一做練習(xí)，用用karma、Jest、AVA，結(jié)果剛開始就遇到了一個(gè)坑，折騰了好久才解決。

這個(gè)坑的大概是由于測試文件中使用了ES6語法，使用istanbul cover命令的時(shí)候就會(huì)報(bào)錯(cuò)，在網(wǎng)上找了很多方法試驗(yàn)，最終是成功的方法記錄如下

1、 安裝必要的包

yarn add cross-env babel-plugin-istanbul nyc --dev

2、 在package.json中添加如下內(nèi)容

{
  …
  "nyc": {
    "require": [
      "babel-register"
    ],
    "reporter": [
      "lcov",
      "text"
    ],
    "include": [
      # 測試文件路徑，如 "test/**/*.spec.js"
    ],
    "sourceMap": false,
    "instrument": false
  }
  …
}

或者新建一個(gè).nycrc文件放入

{
  "require": [
    "babel-register"
  ],
  "reporter": [
    "lcov",
    "text"
  ],
  "include": [
    # 測試文件路徑，如 "test/**/*.spec.js"
  ],
  "sourceMap": false,
  "instrument": false
}

3、 在.babelrc的env中添加

{
  …
  "env": {
    …
    "test": {
      "plugins": [
        [
          "istanbul", {
            "exclude": [
              # 測試文件路徑，如 "**/*.spec.js"
            ]
          }
        ]
      ]
    }
  }
}

4、 在package.json的scripts中加入

"test:cov": "cross-env NODE_ENV=test nyc --reporter=text --reporter=lcov mocha test/**/*.spec.js"

5、 在終端執(zhí)行yarn test:cov，最終成功效果如下

6、 最后再添加上.travis.yml和.coveralls.yml文件，再通過一些配置，就可以有

Build Status

Coverage Status

參考資料

• 前端開源項(xiàng)目持續(xù)集成三劍客
• 如何讓你的github項(xiàng)目更加高大上
• .travis.yml配置
• nyc官網(wǎng)