使用Rollup.js构建React库时如何在Jest测试中正确mock函数？

你可以根据场景选择以下三种方案之一处理：

方案1：调整Rollup打包配置（库开发者优先选择，从根源解决问题） #

作为库开发者，建议你调整Rollup配置避免生成带hash的拆分chunk，保证打包后模块路径和源码一致：

• 开启preserveModules保留原文件结构，完全禁用不必要的chunk拆分，编译后的dist目录会和源码目录结构完全对应：

// rollup.config.js
export default {
  // 其他原有配置
  output: {
    dir: 'dist',
    format: 'esm',
    // 新增以下配置
    preserveModules: true,
    preserveModulesRoot: 'src', // 按你实际的源码根目录调整
  }
}

• 如果你确实需要代码分割能力，只需去掉chunk名的hash后缀，固定拆分后的文件名即可：

// rollup.config.js
export default {
  output: {
    dir: 'dist',
    format: 'esm',
    chunkFileNames: '[name].js', // 去掉默认的hash占位符
  }
}

调整后编译的Beta.js会直接从./Alpha.js导入依赖，此时你原有的mock写法jest.mock('MyLibrary/dist/Alpha')即可正常生效。

方案2：配置Jest路径映射（无需修改库打包逻辑） #

如果不方便调整Rollup配置，可以通过Jest的moduleNameMapper配置，自动匹配所有带hash后缀的Alpha chunk，统一重定向到你要mock的模块：

// jest.config.js
module.exports = {
  moduleNameMapper: {
    // 匹配所有Alpha开头加任意后缀的chunk路径，重定向到顶层Alpha模块
    '^MyLibrary/dist/Alpha(-.*)\\.js$': 'MyLibrary/dist/Alpha'
  }
}

配置后不管Rollup生成的中间chunk hash值是什么，Jest都会自动将其重定向到顶层Alpha模块，你写的mock规则会直接生效。

方案3：测试时直接导入源码（仅适用于库自身的单元测试） #

如果你是在MyLibrary库内部做单元测试，无需导入dist目录下的编译产物，直接导入源码文件即可完全避开Rollup编译的影响：

// 直接导入源码而非dist产物
import { Bbb } from './Beta';

jest.mock('./Alpha', () => ({
  Aaa: jest.fn()
}))

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