How to setup jest and puppeteer to work with a react app?

Question

I want to use jest and puppeteer to do e2e testing on a react app. I want the dev server to start up as part of the command to start the tests. In other words, I dont want to have to start the dev server separately and then run the e2e tests. Im just the jest-puppeteer library because I read that you can do that with this library. I have tried to get this to work but it fails with the error:

Logging in › Splash renders net::ERR_CONNECTION_REFUSED at http://localhost:3000

My e2e test file

describe("Logging in", () => {

  beforeAll(async () => {
    await page.goto("http://localhost:3000");

  });

  it("Splash renders", async () => {
    page.waitForSelector("#test-splash-signuplogin-button")
    const text = await page.$eval("#test-splash-signuplogin-button", (e) => e.textContent);
    expect(text).toBe("Signup or login")
  })
})

jest.config.cjs

module.exports = {
  preset: "jest-puppeteer",
  globals: {
    URL: "http://localhost:3000"
  },
  testRegex: "./*\\e2e\\.test\\.js$",
  verbose: true
};

jest-puppeteer.config.cjs

module.exports = {
  launch: {
    headless: 'false',
    devtools: false
  },
  server: {
    command: "REACT_APP_ENV=local react-scripts start",
    port: 3000,
    launchTimeout: 10000,
    debug: true,
  }
}

Did you try tweaking the dev server options per https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-dev-server#jest-dev-server? I'd guess it's because the default `tcp` waiting finishes before the dev server is actually ready to serve responses. — jonrsharpe, Mar 25 '22 at 17:11

score 0 · Accepted Answer · answered Mar 25 '22 at 19:14

I found the solution. First I had to make sure that jest was version: "jest": "26.6.0" in package.json.

Then I had to add this to the top of the file jest.config.cjs

process.env.JEST_PUPPETEER_CONFIG = require.resolve('./jest-puppeteer.config.cjs');

Once I added this, deleted node_modules, re-installed, and ran my test suite, it worked as expected. I also found this github post helpful to find this solution.

https://github.com/smooth-code/jest-puppeteer/issues/160

How to setup jest and puppeteer to work with a react app?

1 Answers1