CODEWITHSUNDEEP
jasminejestjsnuxt.js
Christopher
Christopher

Reputation: 1772

Integration testing with Nuxt and Jest

I wish to render a page using Nuxt's renderAndGetWindow in order to test the values returned by my API.

Here's how I do it:

// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;

beforeAll(async (done) => {
    // Configuration
    const rootDir = resolve(__dirname, '../..');
    let config = {};
    config = require(resolve(rootDir, 'nuxt.config.js'));
    config.rootDir = rootDir; // project folder
    config.env.isDev = false; // dev build
    config.mode = 'universal'; // Isomorphic application

    nuxt = new Nuxt(config);
    await new Builder(nuxt).build();
    nuxt.listen(3001, 'localhost');
    homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
  });

Which gives me 2 distinct errors:

console.error node_modules/jest-jasmine2/build/jasmine/Env.js:157 Unhandled error

console.error node_modules/jest-jasmine2/build/jasmine/Env.js:158 TypeError: setInterval(...).unref is not a function

And

Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

 at mapper (node_modules/jest-jasmine2/build/queue_runner.js:41:52)

I get this ever since I switched from Ava to Jest.

Am I handling my rendering wrong?

Upvotes: 1

Views: 2582

Answers (1)

Brian Adams
Brian Adams

Reputation: 45850

unref

The default test environment for Jest is a browser-like environment through jsdom.

unref is a special function provided by Node. It is not implemented in browsers or in jsdom, but it is implemented in the "node" test environment in Jest.

It looks like testing a Nuxt app requires both a Node environment to start a server, and a jsdom environment to test the resulting UI.

This can be done by setting the test environment to "node" and initializing a window using jsdom during the test setup.

timeout

Jest will "wait if you provide an argument to the test function, usually called done". This applies to test functions and setup functions like beforeAll.

Your beforeAll function has an argument done that is never called. Jest will wait until either done is called or the timeout configured with jest.setTimeout expires (defaults to 5 seconds).

You are using an async function and are using await on what looks to be the asynchronous part of the function so you don't need done. Change your beforeAll function to not take any parameters and that will prevent Jest from waiting for done to be called.

In my tests starting the Nuxt server takes quite a while so you can pass a timeout value as an additional parameter to beforeAll to increase the timeout for just that function.

Here is an updated test with these changes:

/**
 * @jest-environment node
 */
// TODO: Set the environment to "node" in the Jest config and remove this docblock

// TODO: Move this to a setup file
const { JSDOM } = require('jsdom');
const { window } = new JSDOM();  // initialize window using jsdom

const resolve = require('path').resolve;
const { Nuxt, Builder } = require('nuxt');

// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;

beforeAll(async () => {
  // Configuration
  const rootDir = resolve(__dirname, '../..');
  let config = {};
  config = require(resolve(rootDir, 'nuxt.config.js'));
  config.rootDir = rootDir; // project folder
  config.env.isDev = false; // dev build
  config.mode = 'universal'; // Isomorphic application

  nuxt = new Nuxt(config);
  await new Builder(nuxt).build();
  nuxt.listen(3001, 'localhost');
  homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
}, 20000);  // Give the beforeAll function a large timeout

afterAll(() => {
  nuxt.close();
});

describe('homepage', () => {
  it('should do something', () => {
  });
});

Upvotes: 4

Related Questions