参考: https://github.com/douglasduteil/isparta

mochaでES6でかつReact.js(JSX)なクラスをテストする際にコードカバレッジが欲しいと思ったので調べてみた所、ispartaを使う事で可能らしいのでやってみた

ispartaのbabel6サポートに関して

(この記事投稿時)本日4.0.0がリリースされたのでそれを使えばbabel6サポートによるコードカバレッジを出力する事が可能

package.json

{
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "test": "_mocha",
    "test:cov": "node_modules/isparta/bin/isparta cover --include-all-sources --report text --report html node_modules/mocha/bin/_mocha --"
  },
  "devDependencies": {
    "babel-core": "^6.1.18",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.4.1",
    "isparta": "^4.0.0",
    "mocha": "^2.3.3"
  },
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  }
}

.babelrc

{
  "presets": ["es2015", "react"]
}

src/HelloWrold.js

import React from "react";

class HelloWorld {

  say(name) {
    if (!name) {
      throw new Error("name is required");
    }

    return (
      <span>Hello World: {name}</span>
    );
  }
}

export default HelloWorld;

test/mocha.opts

--compilers js:babel-core/register
--recursive

test/HelloWorld-test.js

import { expect } from "chai";

import ReactDOM from "react-dom";

describe("HelloWorld", () => {
  it("say", () => {
    var HelloWorld = require("../src/HelloWorld").default;
    var instance = new HelloWorld();
    expect(instance.say("hoge").props.children[1]).to.be.equal("hoge");
  });
});

あとはtest:covを実行すればターミナル上では

image

ってな感じでcoverageディレクトリに出力されているので

image

余談

ツイートもしましたが