Why I am not able to render my ReactJS application using PhantomJS 2.1.1?

Question

In order to test my react app using webdriver.io, I need to launch it using phantomjs.

At first I thought the problem was webdriver.io but I've realized that PhantomJS returns a blank page when I try to render.

To make some tests I wrote this javascript file:

var page = require('webpage').create();
var args = require('system').args;

var output_file = 'example.png', url = args[1];
t = Date.now();

var width = 1440;
var height = 900;
page.viewportSize = { width: width, height: height };
page.paperSize = {
   format: 'A4',
   orientation: 'landscape',
   margin: { left: '1cm', right: '1cm', top: '1cm', bottom: '1cm' }
};

console.log(url);

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.onLoadFinished = function (status) {
    window.setTimeout(function () {
        try {
            page.evaluate(function (w, h) {
                document.body.style.width = w + 'px';
                document.body.style.height = h + 'px';
              }, width, height);
            t = Date.now() - t;
            console.log('Loading ' + url);
            console.log('Loading time ' + t + ' msec');
            page.clipRect = {top: 0, left: 0, width: width, height: height};
            page.render(output_file);
        }
        catch (e) {
            status = e.message;
        }
        console.log(status + ';;' + output_file);
        phantom.exit();
    }, 10000);
};

try {
    page.open(url);
    console.log('loading');
}
catch (ex) {
    console.log(ex.message);
    phantom.exit();
}

which I launch like this: phantomjs test.js http://localhost:8080

But no matter what I do, example.png is always empty.

I currently use React 0.14.7 and phantomjs 2.1.1. Does anybody have an idea about why I can't render my app ?

PS: I have not mentioned but I have no problem with chrome or firefox

Answer 1

Probably has to do with the lack of ES6 support in PhantomJS. To check I added page.onError() callback to your script (always handy!) and opened some React example site to get this error:

ReferenceError: Can't find variable: Symbol

To polyfill Symbol one can inject a core.js script from this excellent package into the page before loading the target url:

page.onInitialized = function() {
    if(page.injectJs('core.js')){
        console.log("Polyfills loaded");
    }    
}

But that's for opening external sites. If the site that's being tested is under your development (as localhost url suggests) you probably could do with just configuring babel as is shown in this answer.

Answer 2

You can download PhantomJS 2.5.0 Beta at https://bitbucket.org/ariya/phantomjs/downloads.

It features updated QtWebKit engine that supports ES6 natively.