Jest ReferenceError on globally defined JS constants within Angular components

Question

Today I've started using Jest to UnitTest some of our TypeScript files within our Angular project. After the initial Jest setup was done, creating a test for a pure TypeScript method in our util.ts was pretty straight-forward. Now I'm working on testing something in an Angular component, and I'm encountering an error because of our global constants within an imported other Component. So I'm looking for a way to either:

1. Give a default to these global variable in my Jest UnitTest class itself by setting them in a beforeAll.
2. Have a (separated) custom-jest-constants.setup.ts file to predefine all global variables for all tests

I'll save you the details of the steps I did this morning to setup and configure Jest within Angular, but I ended up with the following relevant changes because of it:

Within the angularelements/ root folder:

Added jest.config.ts:

export default {
  clearMocks: true,
  globalSetup: 'jest-preset-angular/global-setup',
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

Added setup-jest.ts:

import 'jest-preset-angular/setup-jest';

Added tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "module": "CommonJs",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Modified package.json:

{
  ...,
  "scripts": {
    ...,
    "test": "jest"
  },
  "devDependencies": {
    ...,
    "@types/jest": "^28.1.3",
    "jest": "^28.1.1",
    "jest-preset-angular": "^12.1.0"
  }
}

Within a new test folder:

Added util.test.ts and question.component.test.ts, what they do isn't too relevant.

The error I'm getting when I run npm test:

 PASS  test/app/util.test.ts
 FAIL  test/app/questionnaire/runtime/question/question.component.test.ts
  ● Test suite failed to run

    ReferenceError: maxFileUploadSizeInKb is not defined

      42 |   ...
    > 43 |   private static readonly UPLOAD_LIMIT_IN_BYTES = +maxFileUploadSizeInKb * 1000;
         |                                                    ^
      44 |   private static readonly IMAGE_UPLOAD_LIMIT_IN_BYTES = +maxImageFileUploadSizeInKb * 1000;
      45 |   ...

      at Object.<anonymous> (src/app/document-panel/document-uploading/document-uploading.component.ts:43:52)
      at Object.<anonymous> (src/app/questionnaire/runtime/questionnaire-document-panel/questionnaire-document-panel.component.ts:10:1)
      at Object.<anonymous> (src/app/questionnaire/runtime/question/question.component.ts:16:1)
      at Object.<anonymous> (test/app/questionnaire/runtime/question/question.component.test.ts:1:1)

As for the relevant code within the document-uploading.component.ts:

declare const maxFileUploadSizeInKb: string;
declare const maxImageFileUploadSizeInKb: string;

@Component({ ... })
export class DocumentUploadingComponent extends ... {
  private static readonly UPLOAD_LIMIT_IN_BYTES = +maxFileUploadSizeInKb * 1000;
  private static readonly IMAGE_UPLOAD_LIMIT_IN_BYTES = +maxImageFileUploadSizeInKb * 1000;

Those declared constants are global constants that we define in our javascriptPre.jspf:

...
<script ...>
   var maxFileUploadSizeInKb = '<%=Util.parseInt(SettingManager.get(Setting.maximumFileSizeInKb), Setting.DEFAULT_MAX_FILE_SIZE_KB)%>';
   var maxImageFileUploadSizeInKb = '<%=Util.parseInt(SettingManager.get(Setting.maximumImageFileSizeInKb), Setting.DEFAULT_MAX_IMAGE_FILE_SIZE_KB)%>';
</script>
...

Which will basically inject the settings we've defined in our Java backend to this globally defined JS variable, which is accessible within our Angular/Typescript classes as can be seen in the document-uploading.component.ts.

If I temporarily modify the DocumentUploadingComponent to hard-coded constants like this:

private static readonly UPLOAD_LIMIT_IN_BYTES = 5_000_000;
private static readonly IMAGE_UPLOAD_LIMIT_IN_BYTES = 400_000;

Everything works as intended when I run npm test.

So, back to the original question: how could I overwrite/setup the maxFileUploadSizeInKb/maxImageFileUploadSizeInKb to some default value, either within a custom Jest setup file or in a beforeAll within my UnitTest file (or elsewhere perhaps)?

Answer 1

Right after I posted my answer above I finally found the solution, which was simpler than I thought.

In jest.config.ts I've added:

setupFiles: ['<rootDir>/custom-jest-setup.ts'],

And in that added new custom-jest-setup.ts file within my angularelements/ folder I've used:

// @ts-ignore
global.maxFileUploadSizeInKb = 5000;
// @ts-ignore
global.maxImageFileUploadSizeInKb = 400;

And that's it. My UnitTests run without any issues now!