Zombie.js Error: Timeout: did not get to load all resources on this page

Question

I'm having a problem where Zombie.js is throwing an error Error: Timeout: did not get to load all resources on this page.

It's always super random and always seems to happen on a different test.

I used to have the following line of code to prevent this issue.

Browser.waitDuration = '60s';

Problem is recently Stripe.js was causing this problem where my unit tests took an extra 55 seconds. See this question.

So Stripe advised me to remove that line. And sure enough my tests started running faster again.

But I had forgotten that I added that line to prevent this timeout error.

Any ideas on how to fix this while making sure my unit tests don't take an unreasonably long time?

Answer 1

I have never used Zombie.JS, but I've used PhantomJS quite a bit, and I ran into similar issues. My solution was to block unnecessary resources which reduced my request / response times to milliseconds -- for the most part -- during testing.

There is a discussion in another zombie.js-related question where the OP wants to block external resources like Google Analytics:

Prevent zombie.js from loading only external resources

There are two answers provided. One -- the Chosen Answer -- pertains to pre-3.1 zombie.js and the second (non-chosen answer) explains how you might use the 'nock' npm module to stub external resources.

Sorry, but I don't have time to work out any examples. However, I do have a gist with an example of blocking resources in PhantomJS: https://gist.github.com/mootzville/15af584e626b365d2664

Maybe that can give you some ideas.

Good luck.

EDIT (Jun 3, 2017):

I played around with the code you provided in your comment. Below is a sample of some code that should work for you using zombie and nock together:

nock('https://js.stripe.com')
  .get('/v2')
  .replyWithFile(200, __dirname + '/stripev2.js');

var Browser = require('zombie');
var browser = new Browser();
var url = 'https://js.stripe.com/v2';


browser.fetch(url)
  .then(function(response) {
    console.log('Status code:', response.status);
    if (response.status === 200)
      return response.text();
  })
  .then(function(text) {
    console.log('Document:', text);
  })
  .catch(function(error) {
    console.log('Network error');
  });

Just to clarify, the stripev2.js file should exist locally in the same directory as the entry point -- if you were following Node conventions, then it would be where your app.js or index.js file is (typically, the root dir of the app).