gulp + webpack + mocha + assertでブラウザとコンソール両方でテストするサンプル

サンプルソース

ソース: hnakamur/solve-quadratic-equation.js

https

var gulp = require('gulp');
var gutil = require('gulp-util');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var webpackConfig = require('./webpack.config.js');
var open = require('gulp-open');
var mocha = require('gulp-mocha');

// default task is browser test
gulp.task('default', ['browser-test']);

// browser test
gulp.task('browser-test', function (callback) {
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = 'eval';
  myConfig.debug = true;

  new WebpackDevServer(webpack(myConfig), {
    publicPath: '/' + myConfig.output.publicPath,
    stats: {
      colors: true
    }
  }).listen(8080, 'localhost', function (err) {
    if (err) throw new gutil.PluginError('webpack-dev-server', err);

    gulp.src('./test/index.html')
      .pipe(open('', {url: 'http://localhost:8080/webpack-dev-server/test/index.html'}));
  });
});

// node.js test
gulp.task('test', function (callback) {
  gulp.src('test/solve-quadratic-equation_test.js', {read: false})
    .pipe(mocha({reporter: 'nyan'}));
});

テストを実行するためのJavaScriptのコードはJavaScript テストフレームワーク『Mocha』をブラウザ上で使う方法 | TM Lifeを参考にしました。ありがとうございます！

https

require('mocha/mocha.css');
var $ = require('jquery');
require('mocha');

mocha.setup('bdd');

require('./solve-quadratic-equation_test');

$(function() {
  mocha.run();
});

assertはassertをnpmでインストールしてrequireするようにしました。

https

var solveQuadraticEquation = require("../index");
var assert = require("assert");

describe('solveQuadraticEquation', function(){
  describe('Two roots', function(){
    it('should return two roots for x * x - 5 * x + 6 = 0', function(){
      var roots = solveQuadraticEquation(1, -5, 6);
      assert.equal(2, roots.length);
      assert.equal(2, roots[0]);
      assert.equal(3, roots[1]);
    });
// …(略)…

テスト実行方法

ブラウザでのテスト

webpack-dev-serverを8080ポートで起動して、ブラウザでテスト。

gulp

webpack dev serverに書かれていますが、パスの先頭に /webpack-dev-server/ を加えてアクセスすると、ファイルを更新して保存するとwebpack-dev-serverとブラウザが自動的にリロードされます。

別途BrowserSyncを利用しなくても、自動リロードされてお手軽です。

コンソールでのテスト

gulp test