Setting up Puppeteer and Typescript with Jest

In this tutorial, we'll be going over how to set up Puppeteer and Typescript with Jest. We'll be combining the jest-puppeteer preset with the ts-jest preset to get a fully working Typescript environment for our Puppeteer tests.

Installing the packages

First off, we'll need to install the required packages:

npm i -D jest jest-puppeteer puppeteer ts-jest typescript
# or if you prefer to use yarn
yarn add -D jest jest-puppeteer puppeteer ts-jest typescript

We'll also need to install the types for the various libraries we're using:

npm i -D @types/jest @types/puppeteer @types/jest-environment-puppeteer
# or if you prefer to use yarn
yarn add -D @types/jest @types/puppeteer @types/jest-environment-puppeteer

Setting up Jest

Next, we'll need to set up Jest. We'll do this by creating a jest.config.js file at the root of our project. Both ts-jest and jest-puppeteer recommend setting the preset parameter but unfortunately, Jest only accepts one preset. To work around this, we can use the spread operator to merge the two presets together:

// jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
const tsPreset = require('ts-jest/jest-preset');
const puppeteerPreset = require('jest-puppeteer/jest-preset');

module.exports = {
  ...tsPreset,
  ...puppeteerPreset
};

Setting up Typescript

Now that we've got Jest set up, we can set up Typescript. We'll do this by creating a tsconfig.json file at the root of our project. We've included our version below for reference, but there's nothing special about this setup so feel free to configure your own using the tsc --init command:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Writing our first test

Now that we've got everything set up, we can go ahead and write our first test. We'll create a mytest.test.ts file in the tests directory and add the following code:

// tests/mytest.test.ts
import "expect-puppeteer";
import {beforeAll, describe, it} from "@jest/globals";

describe("Google", () => {
    beforeAll(async () => {
        await page.goto("https://google.com");
    });

    it('should display "google" text on page', async () => {
        await expect(page).toMatchTextContent("google");
    });
});

You can customise this test to suit your needs. The important part is to ensure the file ends with .test.ts or .spec.ts so that Jest will pick it up. You can configure this in the jest.config.js file using the testMatch parameter if you prefer a different naming convention.

Running our test

Now that we've got our test written, we need a way to run it. We can do this by adding a test script to our package.json file:

{
  "scripts": {
    "test": "jest"
  }
}

Now we can run our test using the following command:

npm run test
# or if you prefer to use yarn
yarn test

Go forth and test

That's it, you're now ready to go forth and test. We recommend checking out the Puppeteer and jest-puppeteer documentation for more information on how to test with Puppeteer.