React组件用lodash.flowright作compose报错，Enzyme无法识别该工具求助

一、修复compose is not a function错误 #

你遇到的这个错误核心原因是导入lodash.flowright的方式不正确。lodash.flowright包的默认导出就是flowRight函数本身，而不是一个包含该函数的模块对象。

解决步骤：

1. 修改导入语句：
   将原来的：

   import * as compose from 'lodash.flowright';
   

   替换为：

   import compose from 'lodash.flowright';
   

   这样compose就直接指向flowRight函数，调用时就不会报错。

2. （可选）改用完整lodash包的导入方式：
   如果你已经安装了完整的lodash包，也可以直接从lodash中导入并别名成compose，这样更统一：

   import { flowRight as compose } from 'lodash';
   

   这种方式避免了单独安装lodash.flowright子包的依赖，也更符合lodash的最佳实践。

二、解决Enzyme无法识别lodash.flowright的问题 #

在Enzyme测试环境中，通常需要对第三方模块进行mock，确保测试不依赖真实的lodash实现，同时避免模块解析问题。

测试文件中的mock方案：

在你的测试文件顶部添加以下mock代码：

// mock lodash.flowright，模拟compose的函数组合逻辑
jest.mock('lodash.flowright', () => {
  return (...funcs) => {
    return funcs.reduce((prevFunc, currFunc) => {
      return (...args) => prevFunc(currFunc(...args));
    });
  };
});

这个mock会模拟flowRight的核心功能——从右到左组合函数，让Enzyme能够正确解析组件的导出逻辑。

如果是使用完整lodash包的flowRight，则mock对应的路径：

jest.mock('lodash', () => ({
  flowRight: (...funcs) => funcs.reduce((a, b) => (...args) => a(b(...args)))
}));

附加优化建议 #

你的组件中使用了已过时的componentWillReceiveProps生命周期方法，建议替换为componentDidUpdate，同时添加props变化的判断，避免不必要的D3实例化（还可以考虑销毁旧实例防止内存泄漏）：

componentDidUpdate(prevProps) {
  if (!this.props.loading && prevProps.products !== this.props.products) {
    new MostConvD3bar(this.refs.mostConChart, this.props.products);
  }
}

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