Create React App + Typescript + Jest + Cucumber + Puppeteer

jest-puppeteer-preset.ts

const ts_preset = require('ts-jest/jest-preset');
const puppeteer_preset = require('jest-puppeteer/jest-preset');

const preset = Object.assign(
  ts_preset,
  puppeteer_preset,
);

module.exports = preset;

jest-puppeteer.config.js

const config = {
  launch: { 
    headless: false, 
    slowMo: 30, 
  }, 
};

module.exports = config;

jest.config.ts

import type {Config} from '@jest/types';

const config: Config.InitialOptions = {
  verbose: true,

  testMatch: [
    '<rootDir>/e2e/**/*.steps.{js,jsx,ts,tsx}',
  ],

  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest'
  },

  preset: './jest-puppeteer-preset.ts',
      
  testTimeout: 60000,
};

export default config;

package.json

{
  "scripts": {
    "test:e2e": "react-scripts test --watchAll -- --config ./jest.config.ts"
  },

  "devDependencies": {
    "@types/expect-puppeteer": "^4.4.7",
    "@types/jest-environment-puppeteer": "^4.4.1",
    "@types/puppeteer": "^5.4.4",
    "expect-puppeteer": "^6.0.0",
    "jest": "^26.6.0",
    "jest-cucumber": "^3.0.1",
    "jest-puppeteer": "^6.0.0",
    "pptr-testing-library": "^0.6.5",
    "puppeteer": "^10.4.0",
    "ts-jest": "^26.5.6",
    "ts-node": "^10.3.0"
  }
}

search.feature

Feature: Google search

  Scenario: It should be correct google search
  Given I've got opened page "https://www.google.com"
  When I text "Hello world" to search input
  Then I should be redirected to "https://www.google.com/search"

search.steps.ts

import { getDocument, queries } from 'pptr-testing-library';
import { defineFeature, loadFeature } from 'jest-cucumber';

const feature = loadFeature('./search.feature', { loadRelativePath: true });

defineFeature(feature, test => {
  test('It should be correct google search', ({ given, when, then }) => {
    given(/^I've got opened page "(.*)"$/, async (url) => {
      await page.goto(url);
    });

    when(/^I text "(.*)" to search input$/, async (text) => {
      const $document = await getDocument(page);
      const $search = await queries.getByLabelText($document, 'Найти');
      const $submit = await queries.getAllByLabelText($document, 'Поиск в Google');
      await $search.type(text);
      
      await Promise.all([
        $submit[0].click(),
        page.waitForNavigation({"waitUntil":["load", "networkidle2"]}),
      ]);
    });
      
    then(/^I should be redirected to "(.*)"$/, async (url) => {
      expect(await page.url()).toMatch(new RegExp(`^${url}`));
    });
  });
});

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "puppeteer",
      "jest-environment-puppeteer",
      "expect-puppeteer"
    ],
  }
}