Instrumentation seems to break whitespaces in JSX files

[mvestergaard]

I created this simple scenario

hello.jsx:

import React from 'react';

export default React.createClass({
  render: function() {
    return <div ref="d">Hello {this.props.name}</div>;
  }
});

hello.test.jsx:

import React from 'react/addons';
import {expect} from 'chai';
import Hello from '../../../client/hello';

let TestUtils = React.addons.TestUtils;

describe('Hai', () => {
  it('should work', () => {
    var h = TestUtils.renderIntoDocument(<Hello name="foo" />);
    expect(h.refs.d).to.exist;
    expect(h.refs.d.getDOMNode().innerText).to.eql('Hello foo');
  });
});

wallaby.config.js:

var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./build/config/make-webpack-config')();

var webpackPostprocessor = wallabyWebpack(webpackConfig);

module.exports = function () {

  return {
    files: [
      { pattern: 'build/config/phantomjs-shim.js', instrument: false },
      { pattern: 'src/client/**/*.jsx', load: false }
    ],

    tests: [
      { pattern: 'src/tests/client/unit/**/*.jsx', load: false }
    ],

    postprocessor: webpackPostprocessor,

    bootstrap: function () {
      window.__moduleBundler.loadTests();
    }
  };
};

Instrumented webpack bundle (hello.jsx.8.wbp.js)

window.__moduleBundler.cache[8] = [function(__webpack_require__, module, exports) {eval("\"use strict\";\n\nvar _interopRequire = function (obj) { return obj && obj.__esModule ? obj[\"default\"] : obj; };\n\n$_$wp(2);\n\nvar React = _interopRequire(__webpack_require__(2));\n\nmodule.exports = React.createClass({\n    displayName: \"hello\",\n\n    render: function render() {\n        $_$wf(2);\n        return ($_$w(2, 0), React.createElement(\n            \"div\",\n            { ref: \"d\" },\n            \"Hello\",\n            this.props.name\n        ));\n    }\n});\n\n/*****************\n ** WEBPACK FOOTER\n ** /Users/mv/Library/Caches/WebStorm10/wallaby/projects/31d0198c23c89f80/instrumented/src/client/hello.jsx\n ** module id = 8\n ** module chunks = 2\n **/\n//# sourceURL=webpack:////Users/mv/Library/Caches/WebStorm10/wallaby/projects/31d0198c23c89f80/instrumented/src/client/hello.jsx?");
}, window.__moduleBundler.deps];

And with instrumentation disabled:

window.__moduleBundler.cache[8] = [function(__webpack_require__, module, exports) {eval("\"use strict\";\n\nvar _interopRequire = function (obj) { return obj && obj.__esModule ? obj[\"default\"] : obj; };\n\nvar React = _interopRequire(__webpack_require__(2));\n\nmodule.exports = React.createClass({\n  displayName: \"hello\",\n\n  render: function render() {\n    return React.createElement(\n      \"div\",\n      { ref: \"d\" },\n      \"Hello \",\n      this.props.name\n    );\n  }\n});\n\n/*****************\n ** WEBPACK FOOTER\n ** /Users/mv/Library/Caches/WebStorm10/wallaby/projects/31d0198c23c89f80/instrumented/src/client/hello.jsx\n ** module id = 8\n ** module chunks = 2\n **/\n//# sourceURL=webpack:////Users/mv/Library/Caches/WebStorm10/wallaby/projects/31d0198c23c89f80/instrumented/src/client/hello.jsx?");
}, window.__moduleBundler.deps];

\"Hello\" with instrumentation \"Hello \" without.

The test fails with: AssertionError: expected 'Hellofoo' to deeply equal 'Hello foo'

If i change { pattern: 'src/client/**/*.jsx', load: false } in wallaby.config to instrument: false it works, but of course I get no wallaby UI.

I hope it makes sense :)

[mvestergaard]

On another note. Love the project... I'm a big fan of NCrunch for .NET. This type of tool is a fantastic productivity booster.

[ArtemGovorov]

Thanks you! The issue is fixed.

Please note that you need to change devtool option in wallaby webpack config to get correct error stack mappings. Wallaby supported devtool option values are: source-map, hidden-source-map, cheap-module-source-map.

Also, using babel compiler or preprocessor will be more performant in your case. I have updated the documentation for wallaby-webpack, you may see how to configure wallaby for the best performance.

For your specific case the most performant configuration would look like:

wallaby.config.js:

var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./build/config/make-webpack-config')();
var babel = require('babel');

module.exports = function (wallaby) {
  var webpackPostprocessor = wallabyWebpack(webpackConfig);

  // removing babel-loader, we will use babel compiler instead, it's more performant
  webpackConfig.module.loaders = webpackConfig.module.loaders.filter(function(l){
    return l.loader !== 'babel-loader';
  });

  // removing devtool (if you don't have more loaders that transform your code)
  delete webpackConfig.devtool;

  // if you prefer to use babel loader over babel compiler,
  // don't remove it from loaders, assign the webpackConfig.devtool value to: 
  // 'source-map or 'hidden-source-map' or 'cheap-module-source-map'
  // and remove the compilers section below.

  var wallabyPostprocessor = wallabyWebpack(webpackConfig);

  return {
    files: [
      { pattern: 'build/config/phantomjs-shim.js', instrument: false },
      { pattern: 'src/client/**/*.jsx', load: false }
    ],

    tests: [
      { pattern: 'src/tests/client/unit/**/*.jsx', load: false }
    ],

    compilers: {
      'src/**/*.js*': wallaby.compilers.babel({ babel: babel /* , stage: 0 */ }),
    }
    postprocessor: webpackPostprocessor,

    bootstrap: function () {
      window.__moduleBundler.loadTests();
    }
  };
};