Migration from JS to TS, Jest doesn't see "globals"

Question

I recently migrated my code base from JS to TS and everything is looking good so far.

The issue I am facing is that when I try to change the test file extensions to .ts or .tsx as needed, Jest no longer sees all my global variables and setup files.

My package.json, jest.config.js, and tsconfig.development.json.

Is the only solution to use a library like ts-jest (I would like to avoid this if possible)?

If so, I tried previously and wasn't able to get it working (same issue as above). Could someone please kindly provide some hints in the right direction?

Answer 1

No need to add ts-jest explicitly. the latest jest uses ts-jest as default to transform your .ts(x) files. Here are the steps to make your tests work with only .ts(x) files. I am taking npm run test:app as an example

1. change file extensions to .ts.

   tests/__mocks__/variablesMock.ts
   tests/App_spec/App_functions.spec.tsx
   tests/App_spec/App_helpers.spec.tsx
   

2. add the following block to src/typings/common.d.ts or whichever the general type file is. this is to type the extra global attributes you add in tests/__mocks__/variablesMock.ts

   declare global {
     namespace NodeJS {
       interface Global {
      [name: string]: any;
     }
    }
   }
   

3. define the global attributes in your tests.

   A. tests/App_spec/App_helpers.spec.tsx

   const GLOBAL_OBJECT = (global as unknown) as {
     [name: string]: any;
   };
   const init_groups = GLOBAL_OBJECT.init_groups;
   const chromeLocalGetSpy = GLOBAL_OBJECT.chromeLocalGetSpy;
   const chromeLocalSetSpy = GLOBAL_OBJECT.chromeLocalSetSpy;
   const chromeSyncGetSpy = GLOBAL_OBJECT.chromeSyncGetSpy;
   const chromeSyncSetSpy = GLOBAL_OBJECT.chromeSyncSetSpy;
   const mockSet = GLOBAL_OBJECT.mockSet;
   const user = GLOBAL_OBJECT.user;
   

   B. tests/App_spec/App_functions.spec.tsx

   const GLOBAL_OBJECT = (global as unknown) as {
     [name: string]: any;
   };
   const init_groups = GLOBAL_OBJECT.init_groups;
   const chromeLocalGetSpy = GLOBAL_OBJECT.chromeLocalGetSpy;
   const chromeLocalSetSpy = GLOBAL_OBJECT.chromeLocalSetSpy;
   const chromeSyncGetSpy = GLOBAL_OBJECT.chromeSyncGetSpy;
   const chromeSyncSetSpy = GLOBAL_OBJECT.chromeSyncSetSpy;
   const mockSet = GLOBAL_OBJECT.mockSet;
   const user = GLOBAL_OBJECT.user;
   const CONSTANTS = GLOBAL_OBJECT.CONSTANTS;
   const TUTORIAL_GROUP = GLOBAL_OBJECT.TUTORIAL_GROUP;
   const chromeBrowserActionSetBadgeTextSpy = GLOBAL_OBJECT.chromeBrowserActionSetBadgeTextSpy;
   const chromeBrowserActionSetBadgeBackgroundColorSpy = GLOBAL_OBJECT.chromeBrowserActionSetBadgeBackgroundColorSpy;
   const chromeBrowserActionSetTitleSpy = GLOBAL_OBJECT.chromeBrowserActionSetTitleSpy;
   const chromeLocalRemoveSpy = GLOBAL_OBJECT.chromeLocalRemoveSpy;
   const toggleDarkModeSpy = GLOBAL_OBJECT.toggleDarkModeSpy;
   const toggleSyncTimestampSpy = GLOBAL_OBJECT.toggleSyncTimestampSpy;
   const chromeSyncRemoveSpy = GLOBAL_OBJECT.chromeSyncRemoveSpy;
   const exportedJSON = GLOBAL_OBJECT.exportedJSON;
   const chromeTabsRemoveSpy = GLOBAL_OBJECT.chromeTabsRemoveSpy;
   const chromeTabsQuerySpy = GLOBAL_OBJECT.chromeTabsQuerySpy;
   const chromeTabsCreateSpy = GLOBAL_OBJECT.chromeTabsCreateSpy;
   const chromeTabsMoveSpy = GLOBAL_OBJECT.chromeTabsMoveSpy;
   

I'm able to run the tests successfully with these steps npm run test:app.

 PASS  tests/App_spec/App_helpers.spec.tsx (6.081 s)
 PASS  tests/App_spec/App_functions.spec.tsx (11.93 s)

I also have a branch for you to look at if you want it.