在Enzyme中获取React子元素文本值失败问题排查

首先咱们来拆解你遇到的两个核心问题：

1. 为什么wrapper.find('[data-service-fee]')总是返回null？ #

最可能的原因有两个：

• 渲染方式限制：如果你用的是shallow浅渲染，enzyme只会渲染组件的第一层结构，不会深入到FormattedNumber最终生成的DOM元素。而data-service-fee是加在FormattedNumber组件上的，浅渲染下你找不到对应的DOM节点。
• 属性传递验证：虽然react-intl的FormattedNumber默认会传递自定义data-*属性到最终DOM，但还是要确认属性拼写是否正确（比如有没有误写成驼峰dataServiceFee）。

2. 为什么wrapper.find('[label*="service_fee"]').text()返回组件本身？ #

UI.Field是自定义组件，label是它的props而非DOM属性。当你用[label*="service_fee"]查找时，找到的是UI.Field组件实例，浅渲染下调用text()会返回组件的字符串表示（比如<FormattedNumber ... />），而非实际渲染后的文本内容。

针对性解决方案 #

方案一：改用全渲染（mount）代替浅渲染

如果你的测试需要验证最终DOM的文本内容，直接用mount渲染整个组件树：

import { mount } from 'enzyme';

// 替换原来的shallow为mount
const wrapper = mount(<YourParentComponent {...initialProps} />);

it('renders default value if service fee is null', () => {
  wrapper.setProps({
    booking: { ...make(booking), service_fee_cents: null },
  });
  // 现在能直接找到DOM元素并获取文本
  expect(wrapper.find('[data-service-fee]').text()).toBe('€80.00');
});

方案二：如果必须用浅渲染，使用.dive()深入子组件

若因性能或其他原因必须用浅渲染，可以通过.dive()深入到FormattedNumber组件内部：

import { shallow } from 'enzyme';
import FormattedNumber from 'react-intl/FormattedNumber'; // 导入对应组件

it('renders default value if service fee is null', () => {
  const wrapper = shallow(<YourParentComponent {...initialProps} />);
  
  wrapper.setProps({
    booking: { ...make(booking), service_fee_cents: null },
  });
  
  // 先找到UI.Field里的FormattedNumber组件，再dive到它的DOM节点
  const formattedNumber = wrapper.find(UI.Field).find(FormattedNumber);
  expect(formattedNumber.dive().text()).toBe('€80.00');
  
  // 额外验证默认值是否正确传递
  expect(formattedNumber.prop('value')).toBe(8000 / 100); // 80.00
});

小优化：修正默认值逻辑

你的默认值计算booking.service_fee_cents || 8000 / 100存在小问题：如果service_fee_cents是0，也会触发默认值（因为0在逻辑或中被视为假值）。如果这不是预期行为，建议改用空值合并运算符??：

<FormattedNumber 
  style="currency" 
  currency="EUR" 
  data-service-fee 
  value={booking.service_fee_cents ?? 8000 / 100} 
/>

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