Jasmine tests pass in Chrome and Firefox but fail with PhantomJS

Question

I am building a basic blogging app with React. I am using Jasmine and Karma to run my front end tests. I got my first test up and running and it passes in Chrome (Chromium) and Firefox, but when it runs in PhantomJS I get the following error:

PhantomJS 1.9.8 (Linux 0.0.0) ERROR
  TypeError: 'undefined' is not a function (evaluating 'ReactElementValidator.createElement.bind(
          null,
          type
        )')
  at /home/michael/repository/short-stories/test/karma_tests/story_test.js:1742

My test file looks like this:

var React = require('react/addons');
var Story = require('../../app/js/components/story.jsx');
var TestUtils = React.addons.TestUtils;
var testUtilsAdditions = require('react-testutils-additions');

  describe('Story component', function () {
    var component;

    beforeEach(function () {
      component = TestUtils.renderIntoDocument(React.createElement('story'));
      component.props.storyTitle = 'front end test title';
      component.props.author = 'front end author';
      component.props.storyText = 'front end story text';
    });

    it('should display a story', function () {
      expect(component.props).toBeDefined();
      expect(component.props.storyTitle).toBeDefined();
      expect(component.props.storyTitle).toBe('front end test title');
      expect(component.props.author).toBe('front end author');
      expect(component.props.storyText).toBe('front end story text')
    });

  });

I tried deleting my node_modules, and the npm cache clear and npm install, but it didn't fix it. I'm not sure how my tests could pass in Firefox and Chrome, but not in PhantomJS. You can see the full project here: https://github.com/mrbgit/short-stories . Let me know if there's any more info that could help. Any help is appreciated. Thanks!

Answer 1

PhantomJS uses a rather old version of Qt-Webkit that does not provide Function.prototype.bind. This is a problem for a lot of libraries, so a polyfill NPM module called 'phantomjs-polyfill' is available.

If you'd rather not use NPM modules (if you're testing a browser site that hasn't been bundled with browserify/webpack), the following polyfill for bind is provided on the MDN page and you can attach it yourself:

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
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}