Unit testing react + backbone without phantom.js

[yoshuawuyts]

This is closely related to #455, but not entirely the same.

I'm curious how one'd go around to testing browserified backbone + react apps. It appears that react doesn't play well with phantomjs, so I'm looking for alternatives. Jsdom is next on the list, and I'm looking for suggestions how to properly handle this.

An issue that arises when using browserify and not loading the app through an html template is that you're not actually testing against the DOM and can't do things such as <script src='vendor/react.js'></script> to load packages into the global scope.

Do you have any ideas, theorems or suggestions on how to approach unit testing without phantomjs?

[mrjoes]

Try http://karma-runner.github.io/0.10/index.html - we used it with PhantomJS plugin (with small shim to implement missing functionality) and Chrome/Firefox plugins.

[yoshuawuyts]

To what shim are you referring? I've tried karma initially, but couldn't get PhantomJS to play along nicely.

[mrjoes]

Include this snippet to make React work in PhantomJS:

if (!Function.prototype.bind) {
    Function.prototype.bind = function(scope){
        var self = this;
        return function(){
            return self.apply(scope, arguments);
        };
    };
}

[zmbush]

I had trouble with @mrjoes's shim and (I believe) underscores _.bind, so I used the following shim which I pulled out of https://github.com/es-shims/es5-shim/blob/master/es5-shim.js#L48:

if (!Function.prototype.bind) {
    var Empty = function(){};
    Function.prototype.bind = function bind(that) { // .length is 1
      var target = this;
      if (typeof target != "function") {
        throw new TypeError("Function.prototype.bind called on incompatible " + target);
      }
      var args = Array.prototype.slice.call(arguments, 1); // for normal call
      var binder = function () {
        if (this instanceof bound) {
          var result = target.apply(
              this,
              args.concat(Array.prototype.slice.call(arguments))
          );
          if (Object(result) === result) {
              return result;
          }
          return this;
        } else {
          return target.apply(
              that,
              args.concat(Array.prototype.slice.call(arguments))
          );
        }
      };
      var boundLength = Math.max(0, target.length - args.length);
      var boundArgs = [];
      for (var i = 0; i < boundLength; i++) {
        boundArgs.push("$" + i);
      }
      var bound = Function("binder", "return function(" + boundArgs.join(",") + "){return binder.apply(this,arguments)}")(binder);

      if (target.prototype) {
        Empty.prototype = target.prototype;
        bound.prototype = new Empty();
        // Clean up dangling references.
        Empty.prototype = null;
      }
      return bound;
    };
  }

[sophiebits]

We use phantomjs for the React unit tests and polyfill .bind here:

https://github.com/facebook/react/blob/0.13-stable/src/test/phantomjs-shims.js

Closing this out; let me know if anything else is unclear.

[trotzig]

@spicyj, you have no idea how happy your last comment made me. I was neck deep in debugging why Jasmine wouldn't run our specs. After applying the shim you referenced, it now works. Thanks!

[aroc]

@spicyj's phantomjs-shims.js worked for me as well.

[neemzy]

@spicyj, you are my hero today.

[loretoparisi]

I have tried to inject the shim script through page.injectJS, but it didn't work, I guess since page.injectJS does not support closures:

page.open(url, function(status) {
          if (status === "success") {

            if (page.injectJs('phantom-react-shim.js')) {
              page.render(pageCaptureFileName, {
                format: Settings.pageCaptureFileType,
                quality: Settings.pageCaptureQuality
              })
            }

          }
        });

http://phantomjs.org/api/webpage/method/inject-js.html

[neb42]

@spicyj That link is 404'ing. Do you have another copy of the code?

[sophiebits]

Edited my comment to work again.