如何避免TypeScript转译Jest __mocks__并解决重复Mock警告

我来帮你搞定这两个头疼的问题，都是Jest和TypeScript配合时常见的坑：

一、避免TypeScript转译__mocks__目录文件 #

要让TypeScript跳过转译__mocks__里的文件，有两种常用方案，选适合你的就行：

• 方案1：通过tsconfig排除目录
  在你的tsconfig.json里，给exclude数组加上__mocks__目录的匹配规则：

  {
    "compilerOptions": { /* 你的现有配置 */ },
    "exclude": [
      "node_modules",
      "**/__mocks__/**" // 新增这一行
    ]
  }
  

  这样TS编译器就会完全忽略所有__mocks__目录下的文件，适合那些不需要TS检查的纯JS Mock。

• 方案2：通过Jest配置控制转译
  如果你的__mocks__里有TS文件，但不想让Jest用ts-jest转译它们（比如想保留原生JS输出），可以在jest.config.js里调整transformIgnorePatterns：

  module.exports = {
    // 其他配置
    transformIgnorePatterns: [
      "node_modules/",
      "**/__mocks__/**" // 让Jest不对这个目录的文件做转译
    ]
  };
  

  注意：如果你的Mock是TS写的，这个方案可能不适用，得用方案1或者调整transform规则针对Mock目录用不同的转译器。

二、消除同名.ts和.js Mock文件的警告 #

你遇到的这个jest-haste-map: duplicate manual mock found警告，本质是Jest发现了两个同名的Mock文件（.ts和.js版本），它不知道该优先用哪个，所以抛出警告。解决方法很直接：

• 最彻底的方案：删除多余的Mock文件
  既然已经有了.ts版本的Mock，直接删掉对应的.js版本文件就行——留一个版本就不会有冲突了。

• 配置Jest优先选择TS后缀的文件
  如果因为某些原因不能删除.js文件，可以在jest.config.js里调整moduleFileExtensions的顺序，让Jest优先查找.ts文件：

  module.exports = {
    // 其他配置
    moduleFileExtensions: ['ts', 'js', 'json'] // 把ts放在最前面
  };
  

  这样Jest在查找Mock时会优先用.ts版本，忽略.js版本，也就不会触发重复Mock的警告了。

另外，如果你是用ts-jest的话，也可以检查下globals.ts-jest.tsconfig有没有正确配置排除Mock目录，确保不会意外生成对应的.js编译文件（比如从TS Mock编译出JS文件，导致目录里同时存在两个版本）。

内容的提问来源于stack exchange，提问作者jhm