React单元测试报错TypeError: data.filter is not a function求助

根因分析 #

TypeError: data.filter is not a function 报错的核心原因是：.filter() 是JavaScript数组的专属实例方法，你调用该方法的data变量当前不属于数组类型，通常是undefined、null、普通对象或其他非数组类型的值。

现存问题定位 #

从你提供的单元测试代码可以看到，你mock的spaceDonation下的history字段被设置为了普通对象{}：

// 测试代码里的错误mock写法
spaceDonation: {
    history: {}, 
    cId: '11',
} 

如果你的业务代码中是对history字段调用.filter()方法，就会直接触发该报错。

修复步骤 #

• 第一步：先在业务代码调用.filter()的位置前加类型校验，确认变量类型，示例：

console.log('当前data类型：', typeof data, '是否为数组：', Array.isArray(data))

• 第二步：修正单元测试的mock数据，把需要调用.filter()的字段改为数组类型，比如如果是history字段需要筛选，就修改为：

spaceDonation: {
    history: [], // 空数组或者填充对应测试数据的数组
    cId: '11',
}

• 第三步：业务代码增加防御性逻辑，避免非预期类型传入导致崩溃，示例：

// 先判断是否为数组，非数组默认转为空数组再调用filter
const filterResult = (Array.isArray(data) ? data : []).filter(/* 你的筛选逻辑 */)

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