page is not defined. CRA + typescript

🐛 Bug Report

I cannot setup code to use your preset with typescript and CRA

To Reproduce

jest.config.js

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

module.exports = merge.recursive(ts_preset, puppeteer_preset)

package.json

{
  "name": "english",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://english-9231c.firebaseapp.com",
  "dependencies": {
    "@material-ui/core": "3.6.2",
    "@material-ui/icons": "3.0.1",
    "@types/axios": "0.14.0",
    "@types/classnames": "2.2.8",
    "@types/express": "4.17.0",
    "@types/fs-extra": "5.1.0",
    "@types/jest": "23.3.13",
    "@types/lodash": "4.14.134",
    "@types/node": "10.14.8",
    "@types/puppeteer": "1.12.4",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "@types/react-helmet": "5.0.8",
    "@types/react-router-dom": "4.3.3",
    "@types/react-s-alert": "1.3.2",
    "@types/react-table": "6.8.3",
    "@types/subtitle": "2.0.0",
    "axios": "0.18.1",
    "chalk": "2.4.2",
    "classnames": "2.2.6",
    "compromise": "11.13.1",
    "cubic-spline": "1.0.4",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "express": "4.17.1",
    "firebase": "5.11.1",
    "fs-extra": "7.0.1",
    "lodash": "4.17.11",
    "mkdirp": "0.5.1",
    "mui-datatables": "2.3.0",
    "node-sass": "4.12.0",
    "rc-slider": "8.6.12",
    "react": "16.8.6",
    "react-audio-player": "0.11.1",
    "react-clipboard.js": "2.0.12",
    "react-copy-to-clipboard": "5.0.1",
    "react-dom": "16.8.1",
    "react-helmet": "5.2.1",
    "react-markdown": "4.0.8",
    "react-onclickoutside": "6.8.0",
    "react-qr-reader": "2.2.1",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-s-alert": "1.4.1",
    "react-scripts": "2.1.8",
    "react-tooltip": "3.10.0",
    "subtitle": "2.0.3",
    "typescript": "3.5.1",
    "url": "0.11.0",
    "vinyl": "2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy",
    "buildAndGetSEO": "npm run build && ts-node -O \"{\"module\": \"commonjs\"}\" buildSEO.ts",
    "getSEO": "ts-node -O \"{\\\"module\\\": \\\"commonjs\\\"}\" buildSEO.ts"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/jest-environment-puppeteer": "^4.0.0",
    "@types/webpack-env": "1.13.9",
    "critical": "2.0.0-18",
    "jest": "24.8.0",
    "jest-puppeteer": "4.2.0",
    "puppeteer": "1.17.0"
  }
}

App.test.tsx

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

  it.only('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});

when I run npm t I get error

  ● Google › should be titled "Google"

    ReferenceError: page is not defined

      28 |
      29 |   it.only('should be titled "Google"', async () => {
    > 30 |     await expect(page.title()).resolves.toMatch('Google');
         |                  ^
      31 |   });
      32 | });

Expected behavior

Run without error / page is defined

Link to repl or repo (highly encouraged)

Sorry, it is private work, cannot share 😦

Run npx envinfo --system --binaries --npmPackages expect-puppeteer,jest-dev-server,jest-environment-puppeteer,jest-puppeteer,spawnd --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 10.14.1
 - CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
 - Memory: 89.83 MB / 8.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 8.15.1 - /usr/local/opt/node@8/bin/node
 - Yarn: 1.13.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
## npmPackages:
 - jest-puppeteer: 4.2.0 => 4.2.0

[ocavue]

Just meet the same issue. I read this note from the document.

NOTE: Be sure to remove any existing testEnvironment option from your Jest configuration. The jest-puppeteer preset needs to manage that option itself.

After removing testEnvironment in my config file, this error doesn’t present anymore.

Hope this well help.

[RichardLindhout]

Putting

/**
 * @jest-environment puppeteer
 */

above all imports in my test files fixed the issue