Using Jest with Puppeteer and create-react-app

Using Jest with Puppeteer can be great, for example I like to take screenshot from the headless browser to test regression of the user interface.

The result is just right here

The problem

Everything is working perfectly, the problem is that for each test file including puppeteer a new instance of Chrome is loaded, and of course it’s the slowest part of the process.

Jest documentation links us to this repo with a perfect example of integration with Puppeteer. It is initialised inside globalSetup and killed in globalTeardown. But they are not available in create-react-app.

The available src/setupTests.js is not enough to do this properly.

[vuhminh]

u can create a separate test runner for tests with puppeteer

// package.json
"scripts": {
    "test:e2e": "jest -c jest-e2e.config.js",
}
... rest

// jest-e2e.config.js

// Configarion for running jest for end-to-end tests
module.exports = {
  preset: 'jest-puppeteer-preset',
  ...other jest config
};

// jest-puppeteer.config.js
module.exports = {
  launch: {
    headless: true,
  }
};

[christopher-francisco]

How is this working for you guys? CRA uses Jest 20 and it’s not recognizing globalSetup nor globalTeardown options. I’ve also tried to update react-scripts but mine is on 1.1.4 which seems to be the latest version, so I don’t see how would I even have Jest 22. What am I missing?