javascript - 从 JS 迁移到 TS，Jest 看不到 "globals"

Question

我最近迁移了我的 code base从 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举个例子

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

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

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

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

在测试中定义全局属性。
答: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)

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