Blackbing Playground

[gulp] No need to use karma-browserify

天大的 bug

前幾天才寫了一篇 browserify and karma test 的環境設定,結果今天就踩到天大的 bug:Requiring files that require other files will cause failure.,問題是發生在你的 require dependency 太深的話就會發生 error。我自己遇到是在四層以上就會遇到一模一樣的 error message。

底下有人(gah-boh)留言:”I ended up not using karma-browserify. I tried karma-browserifast and ran into another issue with it. “,然後也提供了他的解法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var karma = require('gulp-karma');
var reactify = require('reactify');
var glob = require('glob');
gulp.task('browserify-test', function() {
var testFiles = glob.sync('./assets/tests/**/*.js');
var bundleStream = browserify(testFiles).transform(reactify).bundle({debug: true});
return bundleStream
.pipe(source('bundle-tests.js'))
.pipe(gulp.dest('assets'));
});

browserify your test case

我才發現根本就不需要用到 karma-browserify 來處理 (而且也不需要 gulp-karma(https://github.com/karma-runner/gulp-karma)),直接用 browserify 把所有的 test script 產生出來就好了。

以下是我的 task 設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gulp.task "browserify:test", (callback)->
bundleApp = map( (contents, filename)->
fname = get_name(filename)
browserify(
entries: [filename]
extensions: ['.coffee']
)
.bundle({debug: true})
.on('error', $.util.log )
.pipe(source("#{fname}.js"))
.pipe gulp.dest(compiledPath + "/test/spec")
)
gulp.src('test/spec/**/*.coffee')
.pipe(bundleApp)

然後 test task 照舊但是要在 browserify:test 做完之後在執行即可

1
2
3
4
5
6
7
8
9
gulp.task "test", ['browserify:test'], (callback)->
appRoot = "#{__dirname}/../../"
karmaCommand = appRoot + './node_modules/karma/bin/karma'
karmaConfig = appRoot + 'test/karma.conf.js'
exec("#{karmaCommand} start #{karmaConfig}", (err, stdout, stderr)->
$.util.log stdout
$.util.log stderr
callback(err)
)

結論

我一開始把 browerify 和 karma 的整合想得太複雜了,其實只要把 test case 都經過 browserify compile 之後就可以 run karma 了。我又繞了一大圈,真想殺了我自己。