从 JS 迁移到 TS，Jest 看不到“全局变量”

Question

我最近将我的代码库从 JS迁移到 TS，到目前为止一切看起来都很好。

我面临的问题是，当我尝试将测试文件扩展名更改为.ts或.tsx根据需要更改时，Jest 不再看到我的所有全局变量和设置文件。

我的package.json、jest.config.js和tsconfig.development.json。

是使用类似库的唯一解决方案ts-jest（如果可能，我想避免这种情况）？

如果是这样，我以前尝试过，但无法使其正常工作（与上述问题相同）。有人可以请提供一些正确方向的提示吗？

Answer 1

无需ts-jest显式添加。最新版本默认jest用于ts-jest转换您的.ts(x)文件。以下是使您的测试仅使用文件的步骤.ts(x)。我npm run test:app以

1. 将文件扩展名更改为.ts.

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

2. 将以下块添加到src/typings/common.d.ts或 通用类型文件中。这是输入您添加的额外全局属性tests/__mocks__/variablesMock.ts

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

3. 在测试中定义全局属性。

   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;
   

我能够通过这些步骤成功运行测试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)

我也有一个分支供你看，如果你想要的话。