create-react-app执行npm run test时提示找不到measuretool-googlemaps-v3模块

问题背景 #

用create-react-app创建的项目，运行时导入measuretool-googlemaps-v3一切正常，但执行npm run test生成覆盖率时，报错Cannot find module 'measuretool-googlemaps-v3'，仅该包出现此问题。

可能的原因&解决方案 #

1. 配置Jest转译该第三方包

create-react-app默认会跳过node_modules目录下文件的转译，但部分第三方包可能使用了未编译的ES6语法，或者模块入口配置不符合Jest的解析规则。可以修改Jest配置，让它转译这个包：

修改package.json中的jest配置，添加transformIgnorePatterns字段：

"jest": {
    "coverageReporters": [
      "text",
      "cobertura"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!/node_modules/",
      "!src/index.js",
      "!src/registerServiceWorker.js",
      "!src/setupTests.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(measuretool-googlemaps-v3)/)"
    ]
  }

这个配置的意思是：除了measuretool-googlemaps-v3之外，其他node_modules里的包都跳过转译。

2. Mock该第三方包

如果这个工具依赖浏览器环境（比如谷歌地图API），测试阶段不需要它的实际功能，可以直接mock这个模块，避免Jest去解析真实的包：

在src/setupTests.js中添加mock代码（根据你实际使用的方法调整mock内容）：

jest.mock('measuretool-googlemaps-v3', () => {
  // 模拟你用到的组件或方法
  return jest.fn().mockReturnValue({
    init: jest.fn(),
    clearMeasurements: jest.fn(),
    // 其他你用到的方法都可以在这里模拟
  });
});

3. 重新安装包排除安装异常

有时候包安装不完整也会导致模块找不到，试试：

rm -rf node_modules package-lock.json
npm install

为什么运行时没问题？ #

项目运行时用的是webpack构建，webpack的模块解析规则更灵活，能识别该包的模块格式（比如UMD、ES模块）；而Jest默认的模块解析对部分第三方包的兼容性较差，尤其是未做编译处理的包，就会出现找不到模块的情况。

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