56
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

サンプルソース

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

https://github.com/hnakamur/solve-quadratic-equation.js/blob/9e6b4c5776d6f63b524618870749e3f9dbfcf8a0/gulpfile.js
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://github.com/hnakamur/solve-quadratic-equation.js/blob/9e6b4c5776d6f63b524618870749e3f9dbfcf8a0/test/index.js
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://github.com/hnakamur/solve-quadratic-equation.js/blob/9e6b4c5776d6f63b524618870749e3f9dbfcf8a0/test/solve-quadratic-equation_test.js
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を利用しなくても、自動リロードされてお手軽です。

browser-test-with-webpack-dev-server.png

コンソールでのテスト

gulp test

gulp-test.png

56
55
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?