Jest多项目配置无法读取子目录的.babelrc与webpack.config.json

我之前在monorepo里也碰到过一模一样的问题，给你几个针对性的解决方案：

1. 给每个子项目指定正确的rootDir #

问题核心在于：当你在packages目录运行根Jest配置时，Jest默认工作目录是packages，但子项目的.babelrc、webpack.config.js都是相对自身目录的，导致路径解析完全错位。

修改根目录的jest.config.js，给每个子项目明确指定rootDir，让Jest以子项目的src目录为运行根目录：

module.exports = {
  projects: [
    {
      // 给子项目起别名，方便区分测试输出
      displayName: 'package-a',
      // 指定package-a的运行根目录为它的src文件夹
      rootDir: './a/src',
      // 复用子项目里的resolver配置
      ...require('./a/src/jest.config.js')
    },
    {
      displayName: 'package-b',
      rootDir: './b/src',
      ...require('./b/src/jest.config.js')
    }
  ]
};

这样Jest运行每个子项目测试时，会自动切换到对应的src目录，自然就能找到.babelrc和webpack.config.js了。

2. 强制Babel加载指定配置文件（解决ES6语法报错） #

如果还是出现SyntaxError提示找不到.babelrc，可以在Jest的transform配置里直接指定Babel配置文件路径，避免Babel从错误目录查找：

修改根jest.config.js中package-a的配置：

module.exports = {
  projects: [
    {
      displayName: 'package-a',
      rootDir: './a/src',
      resolver: 'jest-webpack-resolver',
      transform: {
        '^.+\\.(js|jsx)$': [
          'babel-jest',
          {
            // 明确指定package-a的Babel配置文件路径
            configFile: './a/src/.babelrc'
          }
        ]
      }
    },
    // package-b的配置同理，如果需要Babel支持的话
    {
      displayName: 'package-b',
      rootDir: './b/src',
      resolver: 'jest-webpack-resolver'
    }
  ]
};

3. 共享根目录依赖（避免重复安装） #

要让子项目复用根目录的Jest、Babel、Webpack依赖，只需确保Jest能找到根目录的node_modules。在每个子项目的jest.config.js里添加modulePaths：

module.exports = {
  resolver: "jest-webpack-resolver",
  // 从a/src往上两级就是packages目录，指向根node_modules
  modulePaths: ['../../node_modules']
};

这样就不用在每个子项目的package.json里重复安装这些依赖了。

验证效果 #

回到packages目录运行jest命令，应该就能正常解析模块，且Babel能正确转译ES6语法了。

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