global is not defined from pretty-format (@testing-library/dom dependency update needed)

[molily]

First of all, I’d like to say thanks to everyone involved for this great library.

This issue is related to these errors in @testing-library/dom:
testing-library/dom-testing-library#756
testing-library/dom-testing-library#985

This problem is fixed in @testing-library/dom 8.x but people are still running into this problem because several tools still depend on 7.x.

I ran into this known problem twice this week in a Karma + Preact + @testing-library/preact context as well as in a Karma + Angular + Spectator context. Someone seems to have this problem with @testing-library/vue as well.

The old @testing-library/dom depends on pretty-format which assumes a Node context and

• accesses the global global
• accesses process.env(.PTL_SKIP_AUTO_CLEANUP)

both of which are not present in the browser environment.

The exeption is:

ReferenceError: global is not defined
node_modules/@testing-library/preact/node_modules/pretty-format/build/plugins/AsymmetricMatcher.js:10:14
node_modules/@testing-library/preact/node_modules/pretty-format/build/index.js:8:3
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/pretty-dom.js:17:44
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/config.js:11:18
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/queries/label-text.js:8:15
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/queries/index.js:7
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/get-queries-for-element.js:8
node_modules/@testing-library/preact/node_modules/@testing-library/dom/dist/index.js:61
node_modules/@testing-library/preact/dist/pure.js:20
node_modules/@testing-library/preact/dist/index.js:7

I’ve created a minimal demo that triggers the bug:

https://github.com/molily/karma-dom-testing-library

Direct use of @testing-library/dom 8.11.1 in Component.test.js does not trigger the exception on its own. The exception is triggered when importing @testing-library/preact in PreactComponent.test.jsx which depends on @testing-library/dom ^7.16.2.

The obvious solution is to bump the dependency (see also #45). I’m mostly posting this issue for reference for others who run into this problem across the @testing-library/* ecosystem.

A temporary fix is to put this in a test helper:

globalThis.global = globalThis;
globalThis.process = { env: { PTL_SKIP_AUTO_CLEANUP: false } };

(You can also use window instead of globalThis since this code runs in the browser.)

For reference:

@testing-library/preact depends on @testing-library/dom ^7.16.2
@ngneat/spectator depends on @testing-library/dom 7.26.5
@testing-library/vue depends on @testing-library/dom ^7.26.6

Thanks everyone. 😊

[JoviDeCroock]

The dependency has been bumped, closing this issue for now, thank you so much for notifying 🙌