ts-jest与ES模块互操作终极指南：轻松处理CommonJS依赖的10个技巧

ts-jest与ES模块互操作终极指南：轻松处理CommonJS依赖的10个技巧

【免费下载链接】ts-jestA Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.项目地址: https://gitcode.com/gh_mirrors/ts/ts-jest

ts-jest是一个功能强大的Jest转换器，支持源映射，让您能够使用Jest测试用TypeScript编写的项目。本文将分享10个实用技巧，帮助您轻松处理CommonJS依赖，实现ts-jest与ES模块的无缝互操作。

一、理解ts-jest的ESM预设

ts-jest提供了多种ESM预设，可根据项目需求选择合适的预设：

• ts-jest/presets/default-esm：TypeScript文件（.ts、.tsx）将被ts-jest转换为ESM语法，JavaScript文件（.js、jsx）保持原样。
• ts-jest/presets/js-with-ts-esm：TypeScript和JavaScript文件（.ts、.tsx、.js、.jsx、.mjs）都将被ts-jest转换为ESM语法，需要在tsconfig.json中设置allowJs: true。
• ts-jest/presets/js-with-babel-esm：TypeScript文件由ts-jest转换为ESM语法，JavaScript文件由babel-jest转换。

使用工具图标表示ts-jest的配置和故障排除过程

二、基础配置步骤

1. 设置package.json：

   { "type": "module", "jest": { "preset": "ts-jest/presets/default-esm" } }

2. 配置tsconfig.json：

   { "compilerOptions": { "module": "ESNext", "moduleResolution": "NodeNext", "esModuleInterop": true, "allowSyntheticDefaultImports": true } }

三、处理CommonJS依赖的实用技巧

1. 使用esModuleInterop实现平滑过渡

在tsconfig.json中启用esModuleInterop: true，允许TypeScript正确处理CommonJS模块的默认导出。

2. 利用动态import()语法

对于仅支持CommonJS的依赖，使用动态导入：

const legacyLib = await import('legacy-commonjs-lib');

3. 配置Jest模块名称映射

在Jest配置中添加模块映射，解决CommonJS模块的导入问题：

// jest.config.ts export default { moduleNameMapper: { '^legacy-lib$': '<rootDir>/node_modules/legacy-lib/dist/cjs/index.js', }, };

4. 使用require.resolve获取正确路径

当需要明确指定CommonJS模块路径时：

const commonJsPath = require.resolve('commonjs-package');

5. 针对混合模块项目的策略

对于同时包含ESM和CommonJS的项目，使用ts-jest/presets/js-with-ts-esm预设，并确保allowJs: true。

四、高级配置选项

1.useESM选项

useESM选项允许ts-jest在可能的情况下将代码转换为ESM语法，在Jest配置中设置：

// jest.config.ts export default { transform: { '^.+\\.tsx?$': ['ts-jest', { useESM: true }], }, };

2. 处理.mts扩展名

要支持.mts文件，除了在ESM模式下运行Jest和ts-jest外，还需要额外配置TypeScript编译器选项。

3. 设置正确的module和moduleResolution

推荐使用ES2022或ESNext作为module值，以实现对所有最新ESM特性的全面支持。同时设置moduleResolution: NodeNext以匹配Node.js的模块解析行为。

五、常见问题解决

1. "Cannot use import statement outside a module"

确保package.json中设置了"type": "module"，并使用正确的ESM预设。

2. CommonJS模块的默认导入问题

启用esModuleInterop和allowSyntheticDefaultImports选项，解决CommonJS模块的默认导入问题。

3. Jest无法识别ESM模块

检查Jest版本是否支持ESM，推荐使用Jest 27+版本，并正确配置transform选项。

六、示例项目参考

ts-jest提供了多个示例项目，包含ESM和CommonJS配置的基本设置，可在examples/目录下找到。这些示例覆盖了不同场景，如纯TypeScript项目、混合JS/TS项目等。

七、总结

通过本文介绍的10个技巧，您可以轻松实现ts-jest与ES模块的互操作，有效处理CommonJS依赖。关键在于正确配置预设、TypeScript选项和Jest设置，以及合理使用动态导入等特性。如有更多问题，可参考官方文档website/docs/获取详细信息。

掌握这些技巧后，您将能够构建更灵活、更现代的TypeScript测试环境，充分利用ESM的优势，同时兼容现有的CommonJS生态系统。

【免费下载链接】ts-jestA Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.项目地址: https://gitcode.com/gh_mirrors/ts/ts-jest