page is not defined. CRA + typescript

[theGABS]

🐛 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.

[eddyoc]

Didn't help me at all. Problem persists

[RichardLindhout]

Putting

/**
 * @jest-environment puppeteer
 */

above all imports in my test files fixed the issue

[raptoria]

this last comment needs to be included in the documentation!

[UziTech]

@raptoria PRs are welcome 😁👍

[RichardLindhout]

My comment works but this is even better

  "web:test": "react-app-rewired test --env=puppeteer",

[raptoria]

I included these comments in a PR: https://github.com/smooth-code/jest-puppeteer/pull/416

[nweajoseph]

I included these comments in a PR: #416

I'm not sure that what's been described in the comments so far really addresses the root issue. or at least, they can't be the complete picture, because this repo demonstrates the original complaint, even while adopting all of the proposed solutions:

https://github.com/nweajoseph/jest-puppetteer-bug-report

no "testEnvironment" is manually set in jest.config.js, the /** * @jest-environment puppeteer */ comment solution errors:

  ● Test suite failed to run

    wsEndpoint not found

      at PuppeteerEnvironment.setup (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:45:13)

and otherwise the test and config are verbatim from the existing "how to setup" docs:

npx create-react-app . --template= typescript
npm install --save-dev jest-puppeteer puppeteer jest
npm install --save-dev @types/puppeteer @types/jest-environment-puppeteer @types/expect-puppeteer
# configure jest.config.json and delete any files unnecessary to reproduce the issue
npm test

[RichardLindhout]

If you put the --env=puppeteer in your "scripts" { "test": "......what it was before --env=puppeteer" }

It should work

[UziTech]

But why is --env=puppeteer needed? Should jest-puppeteer be setting the test environment? What is overriding jest-puppeteer?

[RichardLindhout]

In my case it was cool to run jest test with puppeteer with an env because I use Detox to test Android/iOS with other Jest runner and use a web abstraction for Detox with puppeteer.

[RichardLindhout]

E.g. you could provide custom jest config to only run .e2e.js files + puppeteer and the rest are just 'normal' tests running with the normal Jest runner

PS: you have a such nice homepage I'm looking at it right now

[UziTech]

It looks like this has nothing to do with typescript but with react-scripts overriding the testEnvironment to 'jsdom' if --env isn't provided.

https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/scripts/test.js#L109-L136