Regression: "ReferenceError: global is not defined"

[EvgenyOrekhov]

• @testing-library/dom version: 7.22.6
• Testing Framework and version: QUnit 2.11.0
• DOM Environment: Chrome 84.0.4147.135 (via Testem)

Relevant code or config:

import { screen } from "@testing-library/dom";

What you did:

I ran my tests: ember test --server.

What happened:

Tests couldn't be executed, the following error was thrown:

ReferenceError: global is not defined
    at Object../node_modules/pretty-format/build/plugins/AsymmetricMatcher.js (test-support.js:37305)
    at __webpack_require__ (test-support.js:18993)
    at Object../node_modules/pretty-format/build/index.js (test-support.js:36889)
    at __webpack_require__ (test-support.js:18993)
    at Module../node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js (test-support.js:19861)
    at __webpack_require__ (test-support.js:18993)
    at Module.callback (test-support.js:19106)
    at Module.exports (vendor.js:118)
    at Module._reify (vendor.js:155)
    at Module.reify (vendor.js:142)

Reproduction:

Problem description:

@testing-library/dom 7.22.3 was working fine.

@testing-library/dom 7.22.6 doesn't work.

Suggested solution:

I can see there was a bump of pretty-format between 7.22.3 and 7.22.6: 9cbc428, perhaps it's the culprit.

[eps1lon]

Could you include a minimal repro? There are no references to global in https://unpkg.com/pretty-format@26.4.2/build/index.js but there are some in https://unpkg.com/@testing-library/dom@7.22.6/dist/@testing-library/dom.esm.js.

Though the references in the bundled @testing-library/dom build have been there for a year now. They assume that we either run in a browser (typeof window !== 'undefined') or in node (where global is defined). Though standalone JS engines don't have global. Though we don't actually support standalone JS shells. We do require an environment where setTimeout is implemented. And as far as I can tell all these environments either have global or window.

[EvgenyOrekhov]

@eps1lon Of course, here: https://github.com/EvgenyOrekhov/ember-with-testing-library.

It is a freshly-generated Ember app with a single test file: https://github.com/EvgenyOrekhov/ember-with-testing-library/blob/master/tests/integration/components/my-component-test.js.

Importing screen into the test file on line 5 breaks the test suite.

Steps to reproduce:

git clone git@github.com:EvgenyOrekhov/ember-with-testing-library.git
cd ember-with-testing-library
npm install
npm run test:watch

A new Chrome window will open up and throw an error.

Important observation: when I run the tests in CLI mode (using npm test:ember), it works fine. It doesn't work only when the actual browser window is launched. So it looks like it works fine with jsdom, but doesn't work with an actual browser. Is my understanding correct?

[kentcdodds]

It definitely should work with an actual browser (many people are testing with actual browsers). Something else is going on where this is somehow running in an environment that has neither a window nor a global. I think that we could change the code to support such an environment (assuming that it has a global setTimeout and clearTimeout. However, I imagine that this environment would have several other problems as well.

So investigation needs to be made to determine why window and global are not available in this particular environment...

[EvgenyOrekhov]

Well, this looks like an actual browser to me :)

You can see on the screenshot that I tried it in the console and got the following results:

• window is defined
• global is not defined
• globalThis is defined

I get the same results in my regular Chrome instance that I use for browsing the Internet.

[kentcdodds]

I'm not sure what to tell you 🤷‍♂️

[EvgenyOrekhov]

@eps1lon This is the first file from the stack trace that references global: https://unpkg.com/browse/pretty-format@26.4.2/build/plugins/AsymmetricMatcher.js (line 10).

[eps1lon]

Thanks. I see the issue and think I know how to solve it. I just want to get the fix right so that we don't regress in the future.

pretty-format caused us quite some trouble in the past since it's part of the jest stack which doesn't work in a browser. So using any package from that stack in a browser is always sketchy because it's untested. But we do want to use it so that the formatting in our library is familiar.

[eps1lon]

I personally don't have the bandwidth to fix this. Codesandbox, rollup as well as karma do transpile global so that it's safe in a browser. Maybe ember should follow, maybe jest should change.

[EvgenyOrekhov]

@eps1lon global is not standard, globalThis is.

Ember uses webpack and Babel under the hood, so it should be able to transpile globalThis if needed, but it doesn't include Node.js polyfills by default.

[Bulletninja]

Were you able to solve this, @eps1lon ?
I just created a react app using nx + react-admin. As soon as i add react-admin it complains about global not defined, and points to that "AsymmetricMatcher.js" plugin.

[eps1lon]

@Bulletninja This is still the latest status:

I personally don't have the bandwidth to fix this.