Cannot get Wallaby.js to work with Webpack

[epsitec]

I've been playing around with Webpack lately, experimenting with custom loaders.

While trying this out, I wanted to integrate the project with Wallaby.js, however I seem to be running into trouble which has nothing to do with my custom loader.

I consistently get this error message while trying to start wallaby:

TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z][a-z\d.-]*$/)')

which points to this source line:

import React from 'react';

Here is my webpack-plugin-experiment.

[epsitec]

I tried importing other modules and it didn't work either. This has probably nothing to do with React.

[ArtemGovorov]

I think it's this issue. You need a polyfill for Function.bind, have a look into https://github.com/wallabyjs/public/issues/280 for an example.

[ArtemGovorov]

Yes, can confirm, it's then .bind missing polyfill issue. I have cloned your repo and added the polyfill to the bootstrap function and the error had gone.

...
    bootstrap: function () {
      if (!Function.prototype.bind) {
        Function.prototype.bind = function(oThis) {
          if (typeof this !== 'function') {
            // closest thing possible to the ECMAScript 5
            // internal IsCallable function
            throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
          }

          var aArgs   = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP    = function() {},
            fBound  = function() {
              return fToBind.apply(this instanceof fNOP && oThis
                  ? this
                  : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
            };

          // test this.prototype in case of native functions binding:
          if (this.prototype)
            fNOP.prototype = this.prototype;
          fBound.prototype = new fNOP();

          return fBound;
        };
      }
      // required to trigger test loading
      window.__moduleBundler.loadTests ();
    }
...

You may leave the polyfill there, or have it loaded from a separate file (there are even node modules with the polyfill IIRC) and include it in your files list, like described in the linked issue.

[ArtemGovorov]

Looking more into what you're trying to do in the repository - please also note that any file transformation (loader), especially if it changes the number of lines in the file, requires a correct source map for it so that wallaby can work correctly. Otherwise it may start reporting errors on wrong lines, because without a source map it has no idea what your transformation has done.

[ArtemGovorov]

Also, in case if it's not intentional, you're checking for uppercase zorg in your loader, but in the spec file you don't have any upper case zorg string.

[epsitec]

Thanks a lot for your help. I am still struggling to get everything to work as I want.

You are right: my experimental loader should not mess with the lines (or better yet, emit a correct source map, but I am not yet ready to do that, still learning...) and the first version I was using just appended the code after an existing line (obviously, this is just an ugly hack to get things rolling).

The loader looks for ZORG (which it finds in the comment) and when running webpack -d manually, I get the generated code with a var Zorg = "Ha!"; inserted before comment // loader.Spec.js. This seems to be missing when I run the tests from Wallaby.js.

[epsitec]

I've updated my sample (see epsitec/webpack-plugin-experiment@06a7d8bceddd14756da2732d849db20dd93fb8c6).

The binding problem has gone away, however for some reason that I don't understand, the Zorg variable does not seem to be injected:

[epsitec]

I suspect that when ran through Wallaby.js, that the source code my loader gets to eat no longer contains any comment.

Changing the log message to read console.log ('ZORG says: ' + Zorg); makes the code work.

No idea who is eating the comments, though.

[ArtemGovorov]

Comments are removed by wallaby https://github.com/wallabyjs/public/issues/156 instrumentation, and unfortunately it's not something that we can easily fix.

[epsitec]

Ah, I was not aware of that. Having no comments won't hurt, it's just good to know.