javascript - ¿Por qué no puedo procesar mi aplicación ReactJS con PhantomJS 2.1.1?

Question

Para probar mi aplicación reaccionar usando webdriver.io, necesito iniciarla usando phantomjs.

Al principio pensé que el problema era webdriver.io, pero me di cuenta de que PhantomJS devuelve una página en blanco cuando intento renderizar.

Para hacer algunas pruebas escribí este archivo javascript:

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();
}

que phantomjs test.js http://localhost:8080 : phantomjs test.js http://localhost:8080

Pero no importa lo que haga, example.png siempre está vacío.

Actualmente uso React 0.14.7 y phantomjs 2.1.1. ¿Alguien tiene una idea de por qué no puedo procesar mi aplicación?

PD: no lo he mencionado pero no tengo ningún problema con Chrome o Firefox

Answer 1

Probablemente tenga que ver con la falta de soporte ES6 en PhantomJS. Para verificar, page.onError() devolución de llamada page.onError() a su script (¡siempre útil!) Y abrí un sitio de ejemplo de React para obtener este error:

ReferenceError: Can''t find variable: Symbol

Para polyfill Symbol, se puede inject un script core.js de este excelente package en la página antes de cargar la URL de destino:

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

Pero eso es para abrir sitios externos. Si el sitio que se está probando está en desarrollo (como sugiere la URL localhost), probablemente podría hacerlo simplemente configurando babel como se muestra en esta respuesta .

Answer 2

Puede descargar PhantomJS 2.5.0 Beta en https://bitbucket.org/ariya/phantomjs/downloads .

Cuenta con el motor QtWebKit actualizado que admite ES6 de forma nativa.