如何为应用子模块配置Jest？解决子模块jQuery版本冲突

看起来你在迁移子模块时遇到了全局jQuery版本不兼容的问题——这确实是多模块项目里常见的痛点，尤其是之前依赖全局注入的场景。下面是几个实操性强的解决方案，帮你在测试环境中实现不同子模块的jQuery版本隔离：

1. 让子模块自主管理jQuery依赖（推荐） #

首先尽量摆脱对全局$的依赖，让目标子模块自己导入特定版本的jQuery：

• 先给子模块安装专属版本的jQuery：

  npm install jquery@x.y.z --save --prefix submodule1
  # 或者在项目根目录安装后，通过别名指定版本
  

• 在子模块的入口文件里显式导入：

  // submodule1/src/index.js
  import $ from 'jquery'; // 此时导入的是子模块package.json里指定的版本
  // 如果是全局注入遗留代码，可以把局部$赋值给全局，但只在子模块初始化时执行
  if (typeof window !== 'undefined') {
    window.$ = window.jQuery = $;
  }
  

这样子模块内部的代码都会使用自己的jQuery版本，和全局环境的版本彻底隔离。

2. 用Jest多项目配置实现测试环境隔离 #

如果暂时没法修改子模块的全局依赖代码，可以通过Jest的多项目配置，给每个子模块单独设置测试环境：

• 修改根目录的jest.config.js，给每个子模块定义独立的测试配置：

  module.exports = {
    projects: [
      // 主应用的测试配置，使用原全局jQuery版本
      {
        displayName: 'app',
        testMatch: ['<rootDir>/app/**/__tests__/**/*.js'],
        setupFilesAfterEnv: ['<rootDir>/setupTests.js']
      },
      // 目标子模块的测试配置，加载专属jQuery版本
      {
        displayName: 'submodule1',
        testMatch: ['<rootDir>/submodule1/**/__tests__/**/*.js'],
        setupFilesAfterEnv: ['<rootDir>/submodule1/__tests__/setup.js'],
        // 强制子模块导入jquery时指向指定版本
        moduleNameMapper: {
          '^jquery$': '<rootDir>/node_modules/jquery/dist/jquery-x.y.z.min.js'
        }
      },
      // 其他子模块同理配置
      {
        displayName: 'submodule2',
        testMatch: ['<rootDir>/submodule2/**/__tests__/**/*.js'],
        // ... 对应子模块的配置
      }
    ]
  };
  

• 在子模块的测试setup文件里，把专属版本的jQuery挂载到全局：

  // submodule1/__tests__/setup.js
  import $ from 'jquery';
  global.$ = global.jQuery = $;
  
  // 再初始化Enzyme适配器（如果需要）
  import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-xx';
  configure({ adapter: new Adapter() });
  

这样运行子模块测试时，Jest会加载对应的配置，确保测试环境里的jQuery是你需要的版本。

3. 验证版本隔离效果 #

为了确保配置生效，可以在子模块的测试文件里加一个简单的断言：

test('loads correct jQuery version for submodule1', () => {
  expect($.fn.jquery).toBe('x.y.z'); // 替换成你的目标版本号
});

总结 #

优先推荐让子模块自主管理依赖，从根源上避免全局冲突；如果受限于遗留代码，Jest的多项目配置可以完美实现测试环境的版本隔离。两种方案都能保证你的子模块测试使用正确的jQuery版本，同时不影响其他子模块和主应用的测试环境。

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