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,
}
}
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.