Set up end-to-end tests with jest-pupeteer and NextJS

Recently I started migrating refinebio to NextJS. It had originally been bootstrapped using Create React App. There was one challenge that I couldn’t find a lot of information online, and it was configuring end-to-end tests with jest-pupetteer. I’m going to write another blog post about other problems that I had to solve to complete the migration.

To run your tests with jest-pupeteer you need to configure 3 files. First, be sure to have a script to run a development server in packages.json

"scripts": {
  "dev": "next",
  // [... other scripts]
},

Then, jest-puppeteer.config.js should have the following configuration.

const PORT = 14568;

module.exports = {
  launch: {
    headless: process.env.CI === 'true',
  },
  browserContext: process.env.INCOGNITO ? 'incognito' : 'default',
  server: {
    command: `yarn run dev --port ${PORT}`,
    port: PORT,
    launchTimeout: 10000,
  },
};

This would ensure that a NextJS server runs in the port 14568 while the tests are running. It will run in Headless mode when the tests are executed in a continuous integration environment like circleci.

Finally, the jest configuration needs to be updated in jest.config.js.

module.exports = {
  preset: 'jest-puppeteer',
};

Conclusion

Even though there’re several alternatives to running end-to-end tests for a NextJS application, the best feature of jest-pupeteer is that it’s independent of NextJS itself. It can be set up to run any development server and the tests in parallel without much hassle.