Jasmine tests pass in Chrome and Firefox, but not with PhantomJS

Question

I am building a basic blogging application with React. I use Jasmine and Karma to run my front end tests. I got my first test and it works, and it runs 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 is as follows:

 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 to remove my node_modules and the npm cache cleaned and installed npm, but it did not fix it. I'm not sure how my tests can 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 is any information that could help. Any help is appreciated. Thanks!

Answer 1

PhantomJS uses a rather old version of Qt-Webkit, which does not provide Function.prototype.bind . This is a problem for a large number of libraries, so the NPM polyfill module called "phantomjs-polyfill" is available .

If you do not want to use NPM modules (if you are testing a browser site that was not connected to the / webpack browser), the polyfill for bind 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; }; }