Jest-puppeteer: Cannot read property 'watch' of undefined

[binhxn]

🐛 Bug Report

On an ejected Create-react-app project, I installed puppeteer and jest-puppeteer and ran a simple script to run jest, but it's immediately returning

TypeError: Cannot read property 'watch' of undefined
    at setup (/node_modules/jest-environment-puppeteer/lib/global.js:30:18)

My jest config is inside my package.json file so I added it in there as mentioned in docs:

"jest": {
  "preset": "jest-puppeteer"
}

I ran two jest commands below, but still get the same result above:

1. "test": "node ./scripts/test.js --env=jsdom"
2. "test": "jest"

Jest Configuration

"jest": "^22.4.2"
"jest-puppeteer": "^3.9.0"
"puppeteer": "^1.12.0"

Expected behavior

I was hoping the test would run successfully without any internal errors.

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.2
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 676.66 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
 - Yarn: 1.13.0 - /usr/local/bin/yarn
 - npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - jest-puppeteer: ^3.9.0 => 3.9.0 

[xiaoyuhen]

hi,@binhxn
I tried to create an app using CRA and tested it with jest-puppeteer. But it works fine.

Could you provide a demo for us to check?

[binhxn]

Hi @xiaoyuhen,
Sorry I forgot to clarify, CRA is version 1, not 2. Unfortunately, I cannot share the code =/ .

Here's my original (related) dependencies:

"babel-core": "6.26.0",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"jest": "^22.4.2",
"jest-puppeteer": "^3.9.0",
"puppeteer": "^1.12.0"

jest configs:

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/config/jest/enzymeSetup.js",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js",
      "jest-localstorage-mock"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      ......
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }

I've been trying to upgrade my Jest dependencies to the latest version, but I keep going down this rabbit hole of upgrading every single babel package (starting with babel-preset-react-app and babel-core. Now I keep seeing this issue and cannot resolve it after trying numerous solutions on it:

Test suite failed to run

Plugin/Preset files are not allowed to export objects, only functions.

If I can't get any further, I may try just setting up a custom setup/teardown config without jest-puppeteer. Thanks for your time, and please let me know if you need additional info.

[xiaoyuhen]

@binhxn

Thank you very much for your information. I will try to use CRA v1 to investigate this issue, it may take one day or two.

[petekp]

Also running into the TypeError: Cannot read property 'watch' of undefined error with a TypeScript fork of CRA (prior to CRA supporting TS directly).

Full error:

TypeError: Cannot read property 'watch' of undefined
    at setup (/Users/petepetrash/code/enrollment_portal/enrollment_portal/client_app/node_modules/jest-environment-puppeteer/lib/global.js:30:18)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Test example:

it('can complete the form', async () => {
  const browser = await puppeteer.launch({
    headless: false
  })

  const page = await browser.newPage()

  await page.goto(FORM_URL)
  await page.waitForSelector('form')
  await page.type('input[name=firstName]', applicant.firstName)
})

## System:
 - OS: macOS 10.14
 - CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
 - Memory: 6.26 GB / 32.00 GB
 - Shell: 2.7.1 - /usr/local/bin/fish
## Binaries:
 - Node: 8.11.3 - /usr/local/bin/node
 - Yarn: 1.12.3 - ~/.yarn/bin/yarn
 - npm: 5.6.0 - /usr/local/bin/npm
## npmPackages:
 - jest-puppeteer: ^3.9.0 => 3.9.0

Related dependencies:

"babel-jest": "^22.1.0",
"babel-loader": "^7.1.2",
"babel-preset-react-app": "^3.1.1",
"jest": "22.4.2",
"jest-puppeteer": "^3.9.0",
"puppeteer": "^1.11.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"ts-jest": "22.0.1",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

Jest config:

"jest": {
    "preset": "jest-puppeteer",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "web.js",
      "js",
      "web.jsx",
      "jsx",
      "json",
      "node",
      "mjs"
    ],
    "globals": {
      "ts-jest": {
        "tsConfigFile": "tsconfig.test.json"
      }
    }
  }

[xiaoyuhen]

@binhxn @petekp

It seems that in the jest v22 version we can't get jestConfig in jestSetup, we will be compatible as soon as possible

Now, you can choose to use jest v23.6 to solve this bug.

[binhxn]

Using Jest 23.6 works, thank you.