Create-react-app: Using Jest with Puppeteer and create-react-app

[didierfranc]

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.

[ieschalier]

It could be a good thing to have a src/globalTestSetup.js or src/globalTestTeardown.js

🤔Someone have a beter idea ?

[minheq]

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

[iskilled]

@minheq does the app have to be ejected for this to work?

[minheq]

@iskilled nope, your create-react-app stays untouched. The script above is independent of create react app, because you are not building or running your app. It is like you are just creating puppeteer + jest tests separately from the project

[didierfranc]

Yes it's what I've done here

https://github.com/didierfranc/cra-puppeteer

[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?

[stellarhoof]

@chris-fa yarn add react-scripts@next. It uses jest 22.

[Timer]

Jest has been updated in react-script v2, you can try it by running the above command (@next).

[jacobweber]

Has anyone figured out a way to do this without running an alpha version of react-scripts? I tried creating my own Jest environment, but the old version of Jest in CRE doesn't have an asynchronous setup() method.