ReferenceError: process is not defined when using with karma, webpack, and jasmine

• @testing-library/dom version: 8.19.0 but I verified this has been present since at least 7.31.2

• Testing Framework and version: karma-webpack 5.0.0, karma-jasmine 4.0.0, jasmine-core 3.7.0

• DOM Environment:
  Chrome Headless 105.0.5177.0 (Mac OS 10.15.7)

Relevant code or config:

In a Jasmine test:

import screen from '@testing-library/dom';

What you did:

Execute the test suite in Chromium using karma:

karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run

The karma.conf.js uses karma-webpack to bundle the tests.

What happened:

When evaluating the @testing-library/dom import, some code that @testing-library/dom imports assumes that it is running in a Node environment and tries to access the process variable. It's not defined since the test is running in a browser environment, so we get this error:

An error was thrown in afterAll
  Uncaught ReferenceError: process is not defined
  ReferenceError: process is not defined
      at Object.push.b (/var/folders/3h/v_p6s_s50s39ydrwn9r7r4300000gn/T/_karma_webpack_545704/webpack:/node_modules/react-is/index.js:3:1)
      at __webpack_require__ (http://localhost:9876/webpack:/@ni/nimble-components/webpack/bootstrap:19:1)
      at Object.<anonymous> (/var/folders/3h/v_p6s_s50s39ydrwn9r7r4300000gn/T/_karma_webpack_545704/webpack:/node_modules/@testing-library/dom/node_modules/pretty-format/build/plugins/ReactElement.js:8:39)
      at __webpack_require__ (http://localhost:9876/webpack:/@ni/nimble-components/webpack/bootstrap:19:1)
      at Object.<anonymous> (/var/folders/3h/v_p6s_s50s39ydrwn9r7r4300000gn/T/_karma_webpack_545704/webpack:/node_modules/@testing-library/dom/node_modules/pretty-format/build/index.js:26:44)
      at __webpack_require__ (http://localhost:9876/webpack:/@ni/nimble-components/webpack/bootstrap:19:1)
      at Object.push.__webpack_unused_export__.value (/var/folders/3h/v_p6s_s50s39ydrwn9r7r4300000gn/T/_karma_webpack_545704/commons.js:18062:13)
      at __webpack_require__ (http://localhost:9876/webpack:/@ni/nimble-components/webpack/bootstrap:19:1)
      at Object.push.__webpack_require__.d.ListOption (/var/folders/3h/v_p6s_s50s39ydrwn9r7r4300000gn/T/_karma_webpack_545704/commons.js:13638:15)
      at __webpack_require__ (http://localhost:9876/webpack:/@ni/nimble-components/webpack/bootstrap:19:1)

Reproduction:

I have a reproduction in my project repo which I could share or try to pare down if needed, but I wanted to start the discussion first to ensure this seems like something that maintainers think should and could be fixed in this repo.

Problem description:

The code that tries to access process is in react-isindex.js.

That code is pulled in because @testing-library/dom is importing everything from pretty-format which includes its React support.

My project doesn't use React at all so it would be nice if the React code could be tree shaken away.

Suggested solution:

This is similar to https://github.com/testing-library/angular-testing-library/issues/244 in angular-testing-library which I believe was fixed by guarding against accessing the process variable. However since the code that's accessing process is not part of testing-library, that fix doesn't seem feasible here. If we can't come up with a fix in testing-library then we could consider filing a bug to pretty-format or react-is asking them to do this.

I'd hope testing-library could sever this dependency chain somewhere when a test suite isn't using React but I'm not sure what the right place to do this would be.

Workaround

Define process globally so that the code that accesses it doesn't fail. Once the react-is code gets past the place that it tries to access process, it isn't needed so using a stubbed process is ok.

In setup.ts which is part of the files array in karma.conf.js, add code like:

window.process = {
    env: {
        NODE_ENV: 'production'
    }
};

Start with src/pretty-dom.js and the dependency path through pretty-format to react-is/index.js, then reproduce the browser failure with karma.conf.js and the documented karma command. Check how the setup.ts workaround affects the import; done means importing @testing-library/dom in the Karma browser run no longer throws ReferenceError without requiring a global process stub.