[Front-End General] CodePen 上で Mocha のテストを実行する方法

公開日: 2016/10/07
更新日: 2018/12/26

小ネタ。

ライブラリは CDN 経由で読み込む。

https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.0/mocha.min.css
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.0/mocha.min.js
https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js

テスト結果の表示エリアを確保する。

HTML
<div id="mocha"></div>

普通にテストを書いて、mocha.setup('bdd') と mocha.run() で表示できる。

JavaScript
mocha.setup('bdd');
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
// Tests
describe('Calculation of the decimal fraction', function() {
  var x = 0.2 * 3;
  var y = ((0.2 * 10) * 3) / 10;
  it('should return 0.6 when 0.2 * 3', function() {
    x.should.equal(0.6);
  });
  it('should return 0.6 when ((0.2 * 10) * 3) / 10', function() {
    y.should.equal(0.6);
  });
});
mocha.run();

See the Pen Running Mocha in the browser by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺