[Help needed] mixed use of jest-environment-puppeteer and jest-enviroment-jsdom?

[DongShi]

💬 Questions and Help

Hey there:
I am new to jest and jest-puppeteer, and meet some problems:
In my project, some test suites are jsDom based and some are puppeteer based.
By the jest doc, we can assign different ENV to different files with a docblock like

/**

• @jest-environment jest-environment-puppeteer
  */

So I put this docblock to my puppeteer-based test suites, and leave the others intact (since jest-enviroment-jsdom is the default test ENV)

I give it a try, but see that the code throws at the following(PuppeteerEnviroment.js):

  async setup() {
    const config = await readConfig()
    this.global.puppeteerConfig = config

    const wsEndpoint = process.env.PUPPETEER_WS_ENDPOINT
    if (!wsEndpoint) {
      throw new Error('wsEndpoint not found')
    }

Basically, it seems I need to set the node ENV variable (PUPPETEER_WS_ENDPOINT), but what does it mean? What's its format like? Can you shed some light?

Note that if I use the jest-puppeter as the preset in jest.config.js, and skip those jsDom based test cases, things are running fine. I am wondering what is happening behind the scene?

[xiaoyuhen]

you dont need set the node ENV variable, because jest-puppeteer will auto set the variable when global setup. see https://github.com/smooth-code/jest-puppeteer/blob/master/packages/jest-environment-puppeteer/src/global.js#L21

reference https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#browserwsendpoint

[DongShi]

Thanks for the pointers @xiaoyuhen , they are very helpful.
I tried to debug my case and see that the logic your mentioned in global.js is not called at all.

I guess this is because I did not use jest-puppeteer as the preset in jest.config.js, seems doing this will make jest-environment-puppeteer the default test ENV for my project, no?

I do see in the README that:

Update your Jest configuration:

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

I wonder how can I get just-puppeteer work without making it the preset for jest?

[xiaoyuhen]

@DongShi

You can use just-puppeteer without preset config, like this

yarn add jest-environment-puppeteer expect-puppeteer -D

jest.config

module.exports = {
  globalSetup: 'jest-environment-puppeteer/setup',
  globalTeardown: 'jest-environment-puppeteer/teardown',
  testEnvironment: 'jest-environment-puppeteer',
  setupTestFrameworkScriptFile: 'expect-puppeteer',
}

[DongShi]

Thanks for the tip @xiaoyuhen
Again, this is setting the global test ENV for JEST, and in our case, the test suite based on JSDOM will fail like:

Test suite failed to run
ReferenceError: window is not defined

But I think I find a workaround, that is to make jest-environment-puppeteer the default test ENV and meanwhile add a doc block to JSDOM-based test suites like

/**

• @jest-environment jsdom
  */

This will get different test suites correctly set-up.

[caoweiju]

@DongShi how do you JSDOM to testEnvironment while use jest-puppeteer? jest-puppeteer's inside testEnvironment was customed，has no window Object, when i run same test based on jsdom, i get 'window is not defined'

[caoweiju]

#234 i see this, add this block code to any test file's head

/**
 * @jest-environment jsdom
 */

it works well

[peterbe]

To anybody else stumbling into this; in my case it was this:

My jest.config.js essentially looked like this:

module.exports = {
  preset: isBrowser ? 'jest-puppeteer' : undefined,
  ...
  globalSetup: './script/start-server-for-jest.mjs',
  globalTeardown: './script/kill-server-for-jest.mjs',
}

But the my own setting of globalSetup and globalTeardown "overrode" what the preset wants to do.
I guess I want/need both. So I added the following into my ./script/start-server-for-jest.mjs:

import setupJestPuppeteer from 'jest-environment-puppeteer/setup.js'
...
export default async () => {
  ...
  if (process.env.BROWSER) {
    await setupJestPuppeteer()
  }
}