React Redux Form字段数组组件测试失败，求排查修复方案

我看了你的组件和测试代码，测试失败（找不到UttakPeriodType和UttakPeriodContent组件）的原因主要有两个关键问题，还有一个潜在的配置问题：

1. 组件代码里的变量名拼写错误（最致命） #

在UttakPeriod组件的UttakPeriodType props中，你写了openForm={periode.openForm}，但前面定义的变量是const period = field.get(index);——这里多了一个字母e，写成了periode而不是period。

这个拼写错误会导致渲染时抛出ReferenceError: periode is not defined，组件渲染失败，shallow渲染后的wrapper自然找不到任何子组件，所以长度为0。

修复：
把openForm={periode.openForm}改成openForm={period.openForm}：

<UttakPeriodType 
  toDate={period.tom} 
  fromDate={period.fom} 
  openForm={period.openForm} // 修正拼写错误
  id={period.id} 
  editPeriode={editPeriode} 
  isAnyFormOpen={isAnyFormOpen} 
  isNyPeriodeFormOpen={isNyPeriodeFormOpen} 
  readOnly={readOnly} 
/>

2. 测试代码中meta变量未定义 #

你的测试代码里给组件传了meta={meta}，但没有定义meta变量。这会导致组件在访问other.meta.error时抛出错误，同样会中断渲染流程。

修复：
在测试代码里添加meta的模拟定义，比如：

const meta = { error: null }; // 可以根据测试场景设置error值，比如测试错误提示时改成{ error: "测试错误" }

3. 潜在的shallowWithIntl配置问题 #

如果上面两个问题修复后还是失败，需要检查shallowWithIntl是否正确配置了React Intl的上下文。如果组件依赖intl对象，但shallow渲染时没有提供正确的上下文，也会导致组件渲染失败。

可以尝试打印wrapper.debug()来查看实际渲染结果，确认是否有渲染错误：

console.log(wrapper.debug());

验证修复后的测试 #

完成上面的修复后，重新运行测试，应该能正确找到2个UttakPeriodType和UttakPeriodContent组件，测试通过。

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