React.createElement无效类型警告：Jest+Enzyme测试自定义按钮问题

我仔细看了你的代码和警告信息，这个"类型无效得到undefined"的警告，大概率是下面两个原因之一，咱们一步步来排查：

1. 测试环境中NavigationEvents组件未被正确处理 #

你的Dashboard组件里用了<NavigationEvents>，但在Jest/Enzyme的测试环境中，这个组件并没有被默认提供完整的实现；如果你的react-navigation版本是v5+，NavigationEvents甚至已经被废弃了。当React尝试渲染一个undefined的组件时，就会触发这个警告。

解决办法：在你的测试文件最顶部添加一段mock代码，把NavigationEvents伪装成一个空组件：

jest.mock('react-navigation', () => ({
  ...jest.requireActual('react-navigation'),
  NavigationEvents: () => null, // 只需要让它不触发渲染警告就行
}));

2. DashboardButton的导入方式存在隐患 #

我注意到你在Dashboard组件里用的是命名导入import {DashboardButton} from '../layout/DashboardButton';，但你的DashboardButton文件里，默认导出的是经过redux connect包裹的组件，命名导出的是纯函数组件。

虽然这不是当前警告的直接原因，但这个纯组件并没有被连接到redux store，所以它无法获取enabledLongPress这个props（你在DashboardButton里用到了这个属性）。测试时可能因为逻辑不依赖它所以通过了，但实际运行时会出现props.enabledLongPress为undefined的情况。

解决办法：把Dashboard里的导入改成默认导入：

// 替换原来的命名导入
import DashboardButton from '../layout/DashboardButton';

验证 #

先添加NavigationEvents的mock，运行测试，警告应该就消失了。再修改DashboardButton的导入方式，确保组件能正常获取redux中的状态。

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