With the Global Setup/Teardown and Async Test Environment APIs, Jest can work smoothly with puppeteer.

Generating code coverage for test files using Puppeteer is currently not possible if your test uses page.$eval, page.$$eval or page.evaluate as the passed function is executed outside of Jest's scope. Check out issue #7962 on GitHub for a workaround.

A jest-puppeteer example

The basic idea is to:

  • launch & file the websocket endpoint of puppeteer with Global Setup
  • connect to puppeteer from each Test Environment
  • close puppeteer with Global TeardownHere's an example of the GlobalSetup script
  1. // setup.js
  2. module.exports = async function() {
  3.   const browser = await puppeteer.launch();
  4.   // store the browser instance so we can teardown it later
  5.   global.__BROWSER__ = browser;
  7.   // file the wsEndpoint for TestEnvironments
  8.   mkdirp.sync(DIR);
  9.   fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
  10. };

Then we need a custom Test Environment for puppeteer

  1. // puppeteer_environment.js
  2. class PuppeteerEnvironment extends NodeEnvironment {
  3.   constructor(config) {
  4.     super(config);
  5.   }
  7.   async setup() {
  8.     await super.setup();
  9.     // get the wsEndpoint
  10.     const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf8');
  11.     if (!wsEndpoint) {
  12.       throw new Error('wsEndpoint not found');
  13.     }
  15.     // connect to puppeteer
  16.     this.global.__BROWSER__ = await puppeteer.connect({
  17.       browserWSEndpoint: wsEndpoint,
  18.     });
  19.   }
  21.   async teardown() {
  22.     await super.teardown();
  23.   }
  25.   runScript(script) {
  26.     return super.runScript(script);
  27.   }
  28. }

Finally we can close the puppeteer instance and clean-up the file

  1. // teardown.js
  2. module.exports = async function() {
  3.   // close the browser instance
  4.   await global.__BROWSER__.close();
  6.   // clean-up the wsEndpoint file
  7.   rimraf.sync(DIR);
  8. };

With all the things set up, we can now write our tests like this:

  1. // test.js
  2. describe(
  3.   '/ (Home Page)',
  4.   () => {
  5.     let page;
  6.     beforeAll(async () => {
  7.       page = await global.__BROWSER__.newPage();
  8.       await page.goto('https://google.com');
  9.     }, timeout);
  11.     it('should load without error', async () => {
  12.       await expect(page.title()).resolves.toMatch('Google');
  13.     });
  14.   },
  15.   timeout,
  16. );

Here's the code of full working example.