Issues using with CasperJS

[tgoldenberg]

CasperJS is a browser simulator for running end-to-end browser tests. I had a simple test suite (user visits landing page, inserts email, clicks button, get success message) that was working on my app when I was using create-react-app. After migrating to Next.js, the tests break mysteriously. I think it may have to do with using Router.push, but I'm not sure. Has anyone used CasperJS on a Next.js-built app or has any idea why it might not be working? I appreciate any help.

/* sample test on CasperJS */
casper.test.begin('User can check their status', function suite(test) {
  var url = casper.cli.get('url'); 
  casper.start(url, function() {
    test.assertExists('#splash-cta-1');
    test.assertSelectorHasText('#splash-cta-1', 'EARLY ACCESS');
    this.wait(300, function() {
      this.capture('screenshots/start.png');
      this.fill('form', { 'reservation[email]': 'tom@example.com' }, false);
      test.assertSelectorHasText('#splash-input-1', 'tom@example.com');
      this.capture('screenshots/filled-input.png');
      this.click('#splash-cta-1');
      test.assertSelectorHasText('#splash-cta-1', 'LOADING...');
      this.capture('screenshots/loading.png');
      console.log('Testing existing email...');
      this.wait(3000, function() {
        test.assertSelectorHasText('#waitlist-lead', "You're on the VIP list for early access! Move up the list by referring friends.");
        this.capture('screenshots/correct-input.png');
      });
    })
  });
  casper.thenOpen(url, function() {
    this.fill('form', { 'reservation[email]': 'tom@c' }, false);
    this.click('#splash-cta-1');
    console.log('Testing wrong email...');
    this.wait(3000, function() {
      test.assertSelectorHasText('h3', 'Mind trying again?');
    });
  });
  casper.thenOpen(url, function() {
    this.click('#splash-cta-1');
    console.log('Testing empty email...');
    this.wait(3000, function() {
      test.assertSelectorHasText('h3', 'Mind trying again?');
    });
  });
  casper.thenOpen(url, function() {
    var newEmail = casper.cli.get('email');
    if (!newEmail) {
      console.log('Must provide an email address');
      process.exit();
    }
    console.log('New email:', newEmail);
    this.fill('form', { 'reservation[email]': newEmail });
    this.click('#splash-cta-1');
    test.assertSelectorHasText('#splash-cta-1', 'LOADING...');
    console.log('Testing new email...');
    this.wait(5000, function() {
      test.assertSelectorHasText('.lead', "You're on the VIP list for early access! Move up the list by referring friends.");
      this.capture('screenshots/correct-input.png');
    });
  })
});

casper.run();

[eezing]

@tgoldenberg I just gave capser-js a try with my next.js site. Was a simple test: start -> echo title -> click nav link (uses "Link" component) -> echo title. Worked fine.

Link component uses Router.push, so that doesn't seem to be the problem. It's difficult to determine what your problem is without seeing your code.

my package.json:

{
  "name": "test",
  "scripts": {
    "test": "node_modules/casperjs/bin/casperjs index.js"
  },
  "devDependencies": {
    "casperjs": "^1.1.3",
    "phantomjs-prebuilt": "^2.1.14"
  }
}

my quick & dirty casper:

var casper = require('casper');

casper
    .create()
    .start('https://ezinterweb.com')
    .then(function() {
        this.echo('Page: ' + this.getTitle());
    })
    .then(function() {
        this.click('#__next > div > div > div:nth-child(1) > div.menu-content > span:nth-child(3) > a');
    })
    .then(function() {
        this.echo('Page: ' + this.getTitle());
    }).run();

[tgoldenberg]

@eezing can you try it on my website? www.commandiv.com.

The issue isn't getting Casper to work, it's the actual steps of filling out a form. Finding it hard to debug, but the exact casper code is above. You can just replace the casper.getUrl() with the hard-coded URL.

[arunoda]

@tgoldenberg may be it's using older version of PhantomJS. I think it might be better to use WebDriver (using real browsers) to do the testing.

We are using it for Next.js itself. When I working on that, I got an issue related to this.
Even I closed this, It's nice if someone could find the cause and do a fix (happy to help).

[arunoda]

May be this is related: #1120
Anyway, I'll keep this open because it might easy for others to find out this.

[cgood92]

@arunoda I've been looking for an issue related to my problem, and this seems to be a close hit. So I'm going to put my problem here.

I'm using Jest + Enzyme to do some testing for React components. Works fine with Next.js, except for the component is trying to use Router.push(). Now, I'm not interesting in testing the router, but I am interested in testing my component, and some of the functions in my component, which may have the Router.push() in them.

I realize that the Router wasn't meant to be used on the server, but is there anyway that I could mock a fake Router or something? For instance, I've tried this approach:

// My test file...
import { createRouter } from 'next/router'
createRouter({ replace: () => {} })

// .... and the tests....

And that seems to get rid of the error No router instance found. You should only use "next/router" inside the client side of your app.. But, it logs out the following: (node:33062) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 37): TypeError: Cannot read property 'abort' of undefined (node:33062) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 39): TypeError: Cannot read property 'getInitialProps' of undefined, because I think it's trying to use XHR on the server.

But anyway, the crux of the question is: what would be a good way to instantiate the Router singleton properly, so that my test cases can pass, and everything looks good to my testing suite?

[arunoda]

@cgood92 Thanks for the research.

We are looking at a properly called router next/router. You can set it manually for testing.
See: https://github.com/zeit/next.js/blob/master/lib/router/index.js#L4