从 JS 迁移到 TS，Jest 看不到“globals”

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)

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