ReferenceError: global is not defined

[steve-taylor-medirecords]

I created a fresh CRA project with TypeScript:

npx create-react-app mocha-vite-puppeteer-poc --template typescript

I added Counter.tsx, Counter.test.tsx and test.html exactly as documented in README.md, except with extensions (and references to them) changed from .js and .jsx to .ts and .tsx.

Running npx mocha-vite-puppeteer produces the following output:

  vite v2.3.2 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose
[vite] connecting...
[vite] connected.

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
file:///Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/mocha-vite-puppeteer/cli.js:67
    throw new Error(message);
          ^

Error: ReferenceError: global is not defined
    at node_modules/pretty-format/build/plugins/AsymmetricMatcher.js (http://localhost:3001/node_modules/.vite/@testing-library_react.js?v=4cf13379:20464:19)
    at __require (http://localhost:3001/node_modules/.vite/chunk-22DOMQDG.js?v=4cf13379:9:44)
    at node_modules/pretty-format/build/index.js (http://localhost:3001/node_modules/.vite/@testing-library_react.js?v=4cf13379:21184:53)
    at __require (http://localhost:3001/node_modules/.vite/chunk-22DOMQDG.js?v=4cf13379:9:44)
    at http://localhost:3001/node_modules/.vite/@testing-library_react.js?v=4cf13379:33334:39
    at file:///Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/mocha-vite-puppeteer/cli.js:67:11
    at /Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:62
    at Array.map (<anonymous>)
    at Object.emit (/Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:43)
    at Page.emit (/Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/puppeteer/common/EventEmitter.js:72:22)
    at Page._handleException (/Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:684:14)
    at /Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:153:66
    at /Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:62
    at Array.map (<anonymous>)
    at Object.emit (/Users/steve/POC/mocha-vite-puppeteer-poc/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:43)

[larsthorup]

Hey @steve-taylor-medirecords thank you for the detailed report!
My guess is that something in @testing-library/react expects global being defined as if it was running in a Node.js environment. To work around this, you can add global = window in your test.html. See the file https://github.com/larsthorup/mocha-vite-puppeteer/blob/main/test/app/test.html (part of the end-to-end test here in this repo).
Please let me know if this solves the issue?

[larsthorup]

Looks like it could be the same issue as this one: testing-library/dom-testing-library#756

[larsthorup]

Closing for lack of reply. Feel free to add additional comments!

[fatso83]

This is even mentioned in the Vite docs. If your code expects global to be defined, then just add global = window in a small script tag before your module executes, just like @larsthorup suggests.