React Redux Form Field Array单元测试失败排查与修复

问题描述 #

我在测试UttakPeriod组件的renderValidationGraphic函数时遇到了问题：实际场景中时间段重叠时提示图片能正常显示，但单元测试始终找不到这个Image元素，报错如下：

AssertionError: expected { length: 0 } to have a length of 1 but got 0

问题根源分析 #

仔细对比你的测试代码和组件逻辑，核心问题出在mock的fields对象缺少length属性。

在UttakPeriod组件中，renderValidationGraphic的触发前提是periods.length === fields.length，而你通过getMockedFields创建的mock对象只实现了map方法，没有模拟formik FieldArray自带的length属性。这导致periods.length === fields.length的判断结果为false（2 === undefined），直接跳过了renderValidationGraphic的调用，自然找不到Image元素。

另外，虽然你的moment时间比较逻辑在生产环境正常，但也要确保测试环境中moment已正确导入，避免潜在的时间比较失效问题（不过这不是本次测试失败的直接原因）。

修复步骤 #

1. 完善mock的fields对象，添加length属性
   修改getMockedFields函数，给返回的fields对象加上length属性，值为传入的fieldNames数组的长度：

   const getMockedFields = (fieldNames, periods) => {
     const field = { get: idx => periods[idx] };
     return {
       map: callback => fieldNames.map((fieldname, idx) => callback(fieldname, idx, field)),
       length: fieldNames.length // 新增：添加length属性
     };
   };
   

2. 验证shallow渲染的正确性
   确保你使用的shallowWithIntl能正确渲染组件内部函数返回的元素（一般enzyme的shallow渲染会处理这种情况，无需额外配置）。

3. 可选：确认moment在测试环境的可用性
   如果测试环境中moment未被正确引入，可能导致时间比较逻辑失效。可以在测试文件顶部导入moment，或者mock它的实现（不过本次问题中这不是必要操作，但若后续出现时间相关问题可以排查）。

修复后的测试验证 #

修改后，periods.length === fields.length的判断会变成2 === 2，条件成立，renderValidationGraphic会被正常调用。此时单元测试就能捕获到重叠提示的Image元素，断言会顺利通过。

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