使用react-horizontal-scrolling-menu时Jest测试用例遇语法错误

方法1：配置Jest转译目标库 #

Jest默认会忽略node_modules目录下的文件转译，但react-horizontal-scrolling-menu是ES模块格式，需要手动将其加入转译白名单。

在你的jest.config.js（或package.json的jest字段）中修改配置：

用jest.config.js的示例： #

module.exports = {
  // 保留其他已有配置
  transformIgnorePatterns: [
    'node_modules/(?!(react-horizontal-scrolling-menu)/)'
  ],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  }
};

用package.json的示例： #

{
  "jest": {
    "transformIgnorePatterns": ["node_modules/(?!(react-horizontal-scrolling-menu)/)"],
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    }
  }
}

方法2：确保Babel配置正确 #

检查你的.babelrc或babel.config.js，确保包含处理React和ES模块的预设，避免转译不完整：

.babelrc示例：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

方法3：Mock库组件（快速替代方案） #

如果不想调整转译配置，可以直接在测试文件中Mock该库的导出，跳过实际模块的导入：

在测试文件顶部添加：

jest.mock('react-horizontal-scrolling-menu', () => ({
  ScrollMenu: ({ children }) => <div>{children}</div>,
  VisibilityContext: {
    Consumer: ({ children }) => children({ isVisible: () => true })
  }
}));

这个Mock会用简单的React组件替代原库的组件，满足测试的渲染需求。

方法4：核对依赖版本 #

确保jest、babel-jest、@babel/core等相关依赖版本匹配，版本不兼容也可能触发模块导入错误。比如Jest 28+需要搭配对应版本的babel-jest。

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