使用IntlProvider的组件无法用Enzyme shallow浅渲染问题咨询

• mount 是全量渲染方法，会完整渲染整个组件树：你配置的wrappingComponent: IntlProvider会被完整渲染，其提供的React Context上下文会正确向下传递给包裹在内的AvailableDiscount组件，组件内部调用useIntl可以正常获取到上下文值，因此运行正常。
• shallow 是浅渲染方法，默认仅渲染传入的最外层组件，不会渲染其子组件：当你携带wrappingComponent配置调用shallow时，等价于让Enzyme浅渲染<IntlProvider><AvailableDiscount /></IntlProvider>，此时仅IntlProvider被渲染，内部的AvailableDiscount并没有被真正执行渲染，自然也拿不到上层的上下文；如果不使用wrappingComponent直接浅渲染AvailableDiscount，则组件直接处于没有IntlProvider的环境，调用useIntl就会抛出未包裹Provider的错误。

这里提供两个常用的可行方案：

方案1：调用dive方法深入渲染 #

在shallow返回的实例后调用dive()方法，让Enzyme深入渲染一层wrappingComponent的子组件，也就是你的目标测试组件，此时组件就能拿到上层IntlProvider的上下文：

const shallowComponent = shallow(component, wrappingOptions).dive();

方案2：Mock useIntl钩子 #

直接mock react-intl的useIntl钩子返回测试需要的值，完全不需要依赖IntlProvider，也不用配置wrappingComponent，测试更轻量：

// 测试文件顶部添加mock
jest.mock('react-intl', () => ({
  ...jest.requireActual('react-intl'),
  useIntl: () => ({
    formatMessage: (msgObj) => msgObj.id, // 这里可以按你的测试需求自定义返回逻辑
    locale: 'en',
  }),
}));

// 测试用例里直接浅渲染即可
const shallowComponent = shallow(<AvailableDiscount balance={balance} />);

内容的提问来源于stack exchange，提问作者Enrique Moreno Tent