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

[anton164]

🐛 Bug Report

Seems related to #192. Locally, the tests run fine, but when running our tests in CircleCI, we get the error:

[Jest Dev server] ℹ ｢wdm｣: Compiled successfully.
 FAIL  test/browser/tests/presentation.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

 FAIL  test/browser/tests/login.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

 FAIL  test/browser/tests/app.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

I've tried clearing the CircleCI cache, but it doesn't help. I also tried adding a global teardown to no avail.

Previously everything was working with:

• "jest-puppeteer": "3.8.0"
• "jest": "23.6.0"
• "puppeteer": "1.11.0"

It fails after updating to:

• "jest-puppeteer": "3.9.0"
• "jest": "24.1.0"
• "puppeteer": "1.12.2"

Our jest.config.js:

module.exports = {
  preset: 'jest-puppeteer',
  roots: ['<rootDir>/test/browser/'],
  testMatch: ['<rootDir>/test/browser/tests/*.entry.js'],
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest',
  },
  verbose: true,
};

Our jest-puppeteer.config.js:

const argv = process.execArgv.join();
const isDebugging =
  Boolean(process.env.debug) ||
  argv.includes('inspect') ||
  argv.includes('debug');
const slowMo = 100;
const browserSettings = isDebugging
  ? {
      devtools: true,
      headless: false,
      slowMo,
    }
  : {
      slowMo,
    };

module.exports = {
  launch: {
    defaultViewport: {
      width: 1920,
      height: 1080,
    },
    args: [
      '--window-size=1920,1080',
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--homedir=/tmp',
      '--data-path=/tmp/data-path',
      '--disk-cache-dir=/tmp/cache-dir',
      '--remote-debugging-port=9222',
      '--proxy-server="direct://"',
      '--proxy-bypass-list=*',
    ].filter(Boolean),
    ...browserSettings,
    dumpio: true,
  },
  server: {
    command: 'yarn test:server',
    protocol: 'http',
    host: 'localhost',
    port: 8082,
    launchTimeout: 500000,
    usedPortAction: 'ignore',
    debug: true,
  },
};

[xiaoyuhen]

hi, @anton164

jest-puppeteer are not support jest v24 yet, please use jest v23.6 now.

see https://github.com/smooth-code/jest-puppeteer/pull/196

[xiaoyuhen]

@anton164

jest-puppeteer are support jest v24 now,.

for jest 22~23 version, you can use[email protected].
for jest 24 version, you can use [email protected].

[anton164]

Awesome, thanks @xiaoyuhen !

[anton164]

With a fresh cache in CircleCI and jest-puppeteer v4 this still breaks:

[Jest Dev server] ℹ ｢wdm｣: Compiled successfully.
 FAIL  test/browser/tests/presentation.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

 FAIL  test/browser/tests/login.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

 FAIL  test/browser/tests/app.entry.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

Although it works in my local environment, so it seems something fishy is going on in CI (never had any issue like this besides this case). Should I do something to my config?

[xiaoyuhen]

@anton164

it's very weird. could you please give me a demo for check this?

[primozs]

For me this happens only when headless false: otherwise it works.

TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

    "babel-jest": "^24.1.0",
    "eslint-plugin-jest": "^22.3.0",
    "faker": "^4.1.0",
    "jest": "^24.1.0",
    "jest-cli": "^24.1.0",
    "jest-image-snapshot": "^2.8.1",
    "jest-puppeteer": "^4.0.0",
    "pptr-testing-library": "^0.3.1",
    "puppeteer": "^1.12.2"

Cheers

---

edit:

Actually it happens in debug. Only if
slowMo: 50 or devtools: true are enabled.
headless: false is fine

[anton164]

@xiaoyuhen here is a repro based on the create-react-example:
https://github.com/anton164/jest-puppeteer-192

As you can see it fails in CircleCI:
https://circleci.com/gh/anton164/jest-puppeteer-192/6

After updating to node v11, there actually seem to be two errors:

 FAIL  integration/app.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (../node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

and

events.js:173
      throw er; // Unhandled 'error' event
      ^

Error: spawn ps ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:19)
    at onErrorNT (internal/child_process.js:427:16)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:252:12)
    at onErrorNT (internal/child_process.js:427:16)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)

The docker image used in CircleCI is quite simple:

# Image for ardoq/ci-docker-front
FROM node:11-slim

RUN apt-get update
RUN apt-get install -y curl git
# Dependencies for headless chrome (puppeteer), see https://github.com/Googlechrome/puppeteer/issues/290
RUN  apt-get update \
  # See https://crbug.com/795759
  && apt-get install -yq libgconf-2-4 \
  # Install latest chrome dev package, which installs the necessary libs to
  # make the bundled version of Chromium that Puppeteer installs work.
  && apt-get install -y wget --no-install-recommends \
  && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
  && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
  && apt-get update \
  && apt-get install -y google-chrome-unstable --no-install-recommends \
  && rm -rf /var/lib/apt/lists/* \
  && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
  && chmod +x /usr/sbin/wait-for-it.sh
RUN npm update
RUN npm install -g grunt-cli

[xiaoyuhen]

@anton164

it's an instrumental demo. thank you for your information.

I will find the problem as soon as possible.

[fullstackwebdev]

I am having a similar problem as well, I isolated it from your CRA example
could be the same or different?

I am trying to launch a browser with "run test:launch" and then run test with connect()

you can see what I tried in the commented out config file

• I am using a "launch.js" to start my chrome browser in debug (see launch.js)
• I am using "connect" in the jest-puppeteer.config.js

I get:

 FAIL  integration/app.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'removeListener' of undefined

      at PuppeteerEnvironment.teardown (../node_modules/jest-environment-puppeteer/lib/PuppeteerEnvironment.js:126:22)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.114s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:integration: `jest -c integration/jest.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test:integration script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

$ npm run launch
(other window)
$ npm run test:integration

on the CRA example, here:
https://github.com/fullstackwebdev/cra-jest-puppeteer-fail

[anton164]

Nice @fullstackwebdev , good to have another example - mine has only been failing in continuous integration (CircleCI)

[MacZel]

I did run into same issue. Tests fail in CircleCI.

[backbone87]

Same problem here, also using connect options, to connect to a chromium instance running inside a docker container. Its lifecycle is managed outside of jest.

[backbone87]

i have found the error. you are not allowed to pass both browserWSEndpoint and browserURL to the connect function.

https://github.com/smooth-code/jest-puppeteer/blob/master/packages/jest-environment-puppeteer/src/PuppeteerEnvironment.js#L40
here the browserWSEndpoint gets merged into the connect options and when using browserURL in those, you will get an error from the function call.

[backbone87]

the browserURL must be unset here https://github.com/smooth-code/jest-puppeteer/blob/master/packages/jest-environment-puppeteer/src/PuppeteerEnvironment.js#L40 since the connect/launch variants are all "normalized" in globals.setup and we always get a browserWSEndpoint from there

[gregberge]

Good! @backbone87 @xiaoyuhen could you submit a PR to fix this bug?

[MacZel]

@backbone87 Your PR solved my issue as well. Thank You a lot!