Skip to main content
Version: 27.0

Usar con puppeteer

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.

Use jest-puppeteer Preset#

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

  1. First, install jest-puppeteer
yarn add --dev jest-puppeteer
  1. Specify preset in your Jest configuration:
"preset": "jest-puppeteer"
  1. Write your test
describe('Google', () => {
beforeAll(async () => {
await page.goto('');
it('should be titled "Google"', async () => {
await expect(page.title()).resolves.toMatch('Google');

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

See documentation.

Custom example without jest-puppeteer preset#

You can also hook up puppeteer from scratch. La idea básica es:

  1. iniciar y archivar el punto final websocket de puppeteer con configuración global
  2. conectarse a puppeteer desde cada entorno de prueba
  3. cerrar puppeteer con Global Teardown

Aquí hay un ejemplo del script GlobalSetup

// setup.js
const {writeFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const mkdirp = require('mkdirp');
const puppeteer = require('puppeteer');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
const browser = await puppeteer.launch();
// store the browser instance so we can teardown it later
// this global is only available in the teardown but not in TestEnvironments
global.__BROWSER_GLOBAL__ = browser;
// use the file system to expose the wsEndpoint for TestEnvironments
await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());

Entonces necesitamos un entorno de prueba personalizado para puppeteer

// puppeteer_environment.js
const {readFile} = require('fs').promises;
const os = require('os');
const path = require('path');
const puppeteer = require('puppeteer');
const NodeEnvironment = require('jest-environment-node');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
class PuppeteerEnvironment extends NodeEnvironment {
constructor(config) {
async setup() {
await super.setup();
// get the wsEndpoint
const wsEndpoint = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
if (!wsEndpoint) {
throw new Error('wsEndpoint not found');
// connect to puppeteer = await puppeteer.connect({
browserWSEndpoint: wsEndpoint,
async teardown() {
await super.teardown();
getVmContext() {
return super.getVmContext();
module.exports = PuppeteerEnvironment;

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

// teardown.js
const os = require('os');
const path = require('path');
const rimraf = require('rimraf');
const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
module.exports = async function () {
// close the browser instance
await global.__BROWSER_GLOBAL__.close();
// clean-up the wsEndpoint file

Con todo lo configurado, ahora podemos escribir nuestras pruebas de esta manera:

// test.js
const timeout = 5000;
'/ (Home Page)',
() => {
let page;
beforeAll(async () => {
page = await global.__BROWSER__.newPage();
await page.goto('');
}, timeout);
it('should load without error', async () => {
const text = await page.evaluate(() => document.body.textContent);

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

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

Here's the code of full working example.