Testing within a javascript closure

2019-02-06 01:13发布

问题:

Is it possible to unit test javascript functions that exist within a closure, so for example, given the following:

(function() {
  var a = function() {
    //do something
  }
  window.b =  function() {
    // do something else
  }
})();

Is it possible to unit test function a without exposing it? If not, is there a good way to expose a, but only in test mode?

回答1:

Your anonymous function could take a parameter which would be undefined when not in test mode, and say this parameter would be an object, you could fill the object with a's without exposing a directly.

Just my .02$



回答2:

The biggest question here is why do you want to keep it hidden? The fact that you have this function a that you want to test is an indicator that a has a responsibility of its own that should be tested. Pulling it out and getting it under test gains much more value when weighed against the minimal risk of exposing it. If you really want to keep it hidden, then I'd suggest something similar to Manux's response where you create an object that does what a does but doesn't expose a directly. Then you could test the behavior of a by testing that object.



回答3:

Revisiting the question 4 years on, I now have a better solution.

Generate a testable version of your code as a build step.

Say I'm using Gulp to minify my JavaScript, and my code looks like this:

var a = function() {}
window.b = function() {}

Not the absence of a closure. Now I set up a gulp task and have it watch my code, like so:

gulp.task('js', function () {
  return gulp.src([dirs.js.src, '*.js'].join('/'))
    .pipe(wrap('(function() {\n<%= contents %>\n})();'))
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(dirs.js.dest));
});

This will wrap my code in the IIFE producing the following output:

(function() {
var a = function() {}
window.b = function() {}
)();

Generating the testable version

Now I add another Gulp task, like this

gulp.task('testJs', function () {
  return gulp.src([dirs.test.src, '*.js'].join('/'))
    .pipe(wrap(
      [
        '(function() {',
          '<%= contents %>',
          '// Smuggle locals out of closure for testing',
          'window.a = a;',
        '})();'
      ].join('\n')
    ))
    .pipe(concat(package.name + '.testable.js'))
    .pipe(gulp.dest(dirs.test.dest));
});

This will generate the following unsafe but testable code right in my test directory:

(function() {
var a = function() {}
window.b = function() {}
// Smuggle locals out of closure for testing
window.a = a;
)();

Add a watch task...

gulp.task('watch', function() {
  gulp.watch([dirs.js.src, '**', '*.js'].join('/'), ['js', 'testJs']);
});

...and you're done.

See here

See here for an example:

https://github.com/forwardadvance/ng-tweets