Today I've delved into the world of Jest for UnitTesting our TypeScript files in an Angular project. Setting up Jest initially was a breeze, and creating tests for pure TypeScript methods in our util.ts file was straightforward. Now, as I tackle testing something within an Angular component, I'm facing an issue due to global constants from another imported Component. So, my quest now is to find a solution by:
- Providing defaults to these global variables within my Jest UnitTest class itself by initializing them in a
beforeAll. - Creating a separate
custom-jest-constants.setup.tsfile to preset all global variables for all tests.
I won't bore you with the nitty-gritty details of setting up and configuring Jest within Angular this morning, but it led me to make some crucial changes, such as:
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, but their specifics are not too pertinent here.
The error that pops up when I execute 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)
Regarding the relevant code snippet 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;
These declared constants are globally defined in our javascriptPre.jspf like so:
...
<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>
...
This injects settings from our Java backend into these globally accessible JS variables, which are then utilized within our Angular/Typescript classes as evidenced in the document-uploading.component.ts.
If I temporarily swap out these dynamic constants for hard-coded values like this:
private static readonly UPLOAD_LIMIT_IN_BYTES = 5_000_000;
private static readonly IMAGE_UPLOAD_LIMIT_IN_BYTES = 400_000;
Everything functions smoothly during npm test execution.
So, circling back to the original query: how can I override/set up the maxFileUploadSizeInKb/maxImageFileUploadSizeInKb to default values, either within a custom Jest setup file or via a beforeAll block in my UnitTest file (or any other approach)?