Angular 16: Karma Test Explorer gives: afterAll Uncaught ReferenceError: global is not defined

Question

Angular 16:

When installing or trying to run the Karma Test Explorer in VSCode I get the following error:

Failed to load tests - Test discovery failed: Browser Error - An error was thrown in afterAll
Uncaught ReferenceError: global is not defined
ReferenceError: global is not defined
    at Object.7836 (http://localhost:9976/_karma_webpack_/webpack:/node_modules/buffer/index.js:43:30)
    at __webpack_require__ (http://localhost:9976/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Module.1021 (http://localhost:9976/_karma_webpack_/vendor.js:9566:64)
    at __webpack_require__ (http://localhost:9976/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Module.6938 (http://localhost:9976/_karma_webpack_/vendor.js:13832:79)
    at __webpack_require__ (http://localhost:9976/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Module.1529 (http://localhost:9976/_karma_webpack_/vendor.js:27:84)
    at __webpack_require__ (http://localhost:9976/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Module.9694 (http://localhost:9976/_karma_webpack_/main.js:8153:69)
    at __webpack_require__ (http://localhost:9976/_karma_webpack_/webpack:/webpack/bootstrap:19:1)

There are many posts about creating polyfills.ts or js files or your own files and doing imports and adding this code

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

to these files and placing references in the karma/angular, etc. config files. Regardless of what I do I get the same error. Unfortunately I need these globals for AWS Amplify so I have to declare them somewhere. I can use either polyfills.ts or index.html.

However, in another project I have no karma.config, no test.ts, no polyfills.ts, and no globals defined anywhere and in that project, the Karma Test explorer runs fine. I ripped out all those files and configs and references to those configs in my problem project in the hope that it would help but it did not. I have to keep the globals though which I put in the index.html.

Anyone know how to solve this problem? The AI tools could not come up with a working solution either. My project runs fine at least. I just can't unit test it.

Answer 1

Turns out that my global definitions were fine. There are many possible places to put these globals. The problem was that I did not point to my source of the globals in enough places. I had them in some, but not all. In my case where I placed them in the polyfills.ts file:

I needed two entries in the angular.json file,

under the 'build'

            "polyfills": [
              "zone.js",
              "src/polyfills.ts"
            ],

under the 'test'

            "polyfills": [
              "zone.js",
              "zone.js/testing",
              "src/polyfills.ts"
            ],

one entry in the tsconfig.app.json file,

  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],

and one entry in the tsconfig.spec.json file.

  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts",
    "src/polyfills.ts"
  ]

I had not placed the entry in the tsconfig.spec.json file.

Answer 2

I had the same error (I'm using angular 18), in my case it happens when starting the app, to do so, I checked the dependency tree and found that "buffer" dependency was missing, so when I added it in my package.json, the problem was resolved.