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

Question

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

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

我的package.json, jest.config.js, and 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

将以下块添加到 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;

乙。 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)

我也有分店给你看，要的话

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

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

javascript

migration

typescript

ts-jest