Javascript - Jest-puppeteer with typescript configuration


How to install and configure puppeteer with Jest and Typescript.

You can also hook up puppeteer via the setup and tear down method. See custom-example-without-jest-puppeteer-preset


You should have the configuration explained on this page: Jest and Typescript installation / configuration.


Install puppeteer and jest-puppeteer

  • Install the library
yarn add jest-puppeteer puppeteer --dev

Install the Types

yarn add @types/puppeteer --dev
yarn add @types/jest-environment-puppeteer --dev
yarn add @types/expect-puppeteer --dev
  • Add them also in the compile path
  "compilerOptions": {
    "types": [



  • Merge the ts-jest and jest-puppeteer
const ts_preset = require('ts-jest/jest-preset')
const puppeteer_preset = require('jest-puppeteer/jest-preset')

module.exports = Object.assign(
  • Change the config
preset: './js/Preset.js'
  • Uncomment testEnvironment
// testEnvironment: "node"


This configuration is not mandatory but will make a debugger keyword in the javascript code stop the execution by:

  • starting puppeteer not in headless mode
  • opening the devtool
let jest_puppeteer_conf = {
    launch: {
        timeout: 30000,
        dumpio: true // Whether to pipe the browser process stdout and stderr 

const isDebugMode = typeof v8debug === 'object' || /--debug|--inspect/.test(process.execArgv.join(' '));

if (isDebugMode) {
    jest_puppeteer_conf.launch.headless = false; // for debug:  to see what the browser is displaying
    jest_puppeteer_conf.launch.slowMo = 250;  // slow down by 250ms for each step
    jest_puppeteer_conf.launch.devtools = true; // This lets you debug code in the application code browser
    jest_puppeteer_conf.launch.args = [ '--start-maximized' ]; // maximise the screen

module.exports = jest_puppeteer_conf;

Test the configuration

Puppeteer's page and browser classes are automatically be exposed.

describe('Google', () => {
    beforeAll(async () => {
        await page.goto('')

    it('should display "google" text on page', async () => {
        await expect(page).toMatch('google')
  • Run
  • Result
PASS  js/__tests__/Google.test.ts (5.688s)
    √ should display "google" text on page (9ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.807s
Ran all test suites.



await jestPuppeteer.debug()

error TS2304: Cannot find name 'page'.

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    js/__tests__/Google.test.ts:17:15 - error TS2304: Cannot find name 'page'.

    17         await page.goto('')

be sure to add the types in your compile path of the tsconfig.json file.

page is not defined

Be sure to uncomment testEnvironment

// testEnvironment: "node"

Documentation / Reference

Discover More
Puppeteer Architecture
Headless browser - Puppeteer

Puppeteer is a Node library that provides a high-level API over Chrome or Chromium (ie headless chrome) Puppeteer communicate with the browser via the DevTools Protocol API The Puppeteer API is hierarchical...

Share this page:
Follow us:
Task Runner