Using with puppeteer

    Jest Puppeteer provides all required configuration to run your tests using Puppeteer.

    1. First install jest-puppeteer
    1. Specify preset in your Jest configuration:
    1. {
    2.   "preset": "jest-puppeteer"
    3. }
    1. Write your test

    There’s no need to load any dependencies. Puppeteer’s page and browser classes will automatically be exposed

    Custom example without jest-puppeteer preset

    You can also hook up puppeteer from scratch. The basic idea is to:

    1. launch & file the websocket endpoint of puppeteer with Global Setup
    2. connect to puppeteer from each Test Environment
    3. close puppeteer with Global Teardown

    Here’s an example of the GlobalSetup script

    1. // setup.js
    2. const path = require('path');
    3. const fs = require('fs');
    4. const os = require('os');
    5. const puppeteer = require('puppeteer');
    9. module.exports = async function () {
    10.   const browser = await puppeteer.launch();
    11.   // store the browser instance so we can teardown it later
    12.   // this global is only available in the teardown but not in TestEnvironments
    13.   global.__BROWSER_GLOBAL__ = browser;
    15.   // use the file system to expose the wsEndpoint for TestEnvironments
    16.   mkdirp.sync(DIR);
    17.   fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
    18. };

    Then we need a custom Test Environment for puppeteer

    1. // teardown.js
    2. const path = require('path');
    3. const rimraf = require('rimraf');
    5. const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
    6. module.exports = async function () {
    7.   // close the browser instance
    8.   await global.__BROWSER_GLOBAL__.close();
    10.   // clean-up the wsEndpoint file
    11.   rimraf.sync(DIR);
    12. };

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

    Finally, set jest.config.js to read from these files. (The jest-puppeteer preset does something like this under the hood.)

    1. module.exports = {
    2.   globalSetup: './setup.js',
    3.   globalTeardown: './teardown.js',
    4.   testEnvironment: './puppeteer_environment.js',

    Here’s the code of full working example.