如何通过导出PureComponent测试Redux连接的React组件？

太懂这种被小语法问题卡得头疼的感觉了！你遇到的这个Could not find "store" in either the context or props of "Connect(componentToExport)"错误，本质是因为你测试的是被connect()包装后的高阶组件——它天生依赖Redux的store上下文，但测试环境里没提供这个上下文。

你想导出纯组件来单独测试的思路完全正确，但之前的写法有语法问题，我给你捋清楚正确的做法：

正确的组件导出方式 #

其实不需要特意让组件继承PureComponent（当然继承了也不影响，但这不是解决问题的核心），关键是要把纯组件和连接后的组件分开导出，正确语法是这样的：

// 先定义你的纯组件（函数组件或类组件都可以）
const ComponentToExport = (props) => {
  // 你的组件逻辑和JSX
  return <div>{props.dataFromRedux}</div>;
};

// 默认导出被connect包装后的组件（供业务代码中使用）
export default connect(mapStateToProps, mapDispatchToProps)(ComponentToExport);

// 命名导出纯组件（专门给测试用）
export { ComponentToExport as PureComponentToExport };

嫌麻烦的话，也可以一开始就给纯组件做命名导出，更直接：

// 直接命名导出纯组件
export const PureComponentToExport = (props) => {
  // 组件逻辑
};

// 默认导出连接后的组件
export default connect(mapStateToProps, mapDispatchToProps)(PureComponentToExport);

测试时的正确姿势 #

在你的测试文件里，别再导入默认导出的那个连接组件了，直接导入命名导出的纯组件：

import { PureComponentToExport } from './your-component-path';

// 现在直接用Enzyme渲染就行，完全不用管store
const wrapper = shallow(<PureComponentToExport dataFromRedux="测试数据" />);

这样你就能完全手动控制传入组件的props，不需要任何外部库，也不用费劲在测试里配置store，完美符合你的需求。之前你写的export default componentToExport as PureComponentToExport是错误的——一个文件只能有一个默认导出，所以必须用命名导出的方式来区分两个导出项。

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