Support for source maps

[axelpale]

Please correct me if I'm missing something but:

The default reporter seems not to understand source maps. If a bundled and minified script is tested, and a test fails, the displayed line number points to the bundled and minified script even when the script includes a link to the source maps or has inline source maps.

For example, a script taaspace.min.js is bundled from about eight files and minified by using Browserify and Minifyify. The details are not important but this is how it is done:

$ browserify --debug --standalone taaspace src/index.js -p [minifyify --map taaspace.map.json --output taaspace.map.json] > taaspace.min.js

Unit tests are run by:

$ mocha-phantomjs tests/testrunner.html

The report includes:

1 passing (11ms)
2 failing

1) taaspace Taa should fire load event:
    ReferenceError: Can't find variable: img
    at file:///Users/xeli/workspace/taaspace/taaspace.min.js:20
    at file:///Users/xeli/workspace/taaspace/tests/taaspace.phantom.js:12

As can be seen from the penultimate line, the bundle is referenced, instead of the actual source file (named src/Taa.js). This makes the stack trace quite useless for the developer.

A dirty hack already exists but it is just a dirty hack.

The source-map-support library could provide some help but it does not seem to have any effect. It can be included in the testrunner.html:

<script src="browser-source-map-support.js"</script>
<script>sourceMapSupport.install();</script>

[axelpale]

If needed, here is the devDependencies of taaspace.js:

"devDependencies": {
  "jshint": "^2.8.0",
  "mocha": "^2.3.3",
  "browserify": "^11.2.0",
  "mocha-phantomjs": "^4.0.1",
  "phantomjs": "^1.9.18",
  "chai": "^3.3.0",
  "chai-jquery": "^2.0.0",
  "jquery": "^2.1.4",
  "minifyify": "^7.1.0"
},

[nathanboktae]

This is an issue with phantomjs, and it doesn't support sourcemaps. Follow ariya/phantomjs#12289

[nathanboktae]

Sorry reading your post a bit more, I see you're trying to come up with a workaround. I think this is out of the scope of mocha-phantomjs's responsibility. For example, you could change that dirty to monkey patch all Error#stack to polyfill source map support and include it with your tests just as all users of phantomjs have to polyfill various other stuff, like MutationObserver, Promise, etc.

[nathanboktae]

Hmm just found convert-source-map - perhaps that solves your problem?

[axelpale]

Thank you Nathan! I see now that the problem lies in PhantomJS.

One can only modify existing source maps with convert-source-map but I cannot see how it would help. I also tried source-map-support to make PhantomJS understand source maps but with negative results.

I did not yet try to monkey patch Error.prototype.stack but it seems promising. Great tip :)

[nathanboktae]

Good luck. You may also want to look at a somewhat competitor project called mochify that is built around Browserify.