React类组件SetState扩展运算符使用及Jest多添加项测试报错排查

我正在开发一个React类组件，组件数据来自回调函数。初始状态为空数组[]，回调函数触发后需将数据更新至状态中，每次仅接收一个包含嵌套对象和数组的项，用户可逐个添加。已编写对应处理逻辑，但在Jest测试中，第二次添加模拟数据时测试失败，报错信息类似“expected - 0 , received +18”。

模拟数据 #

const items = {
  itemList: {
    itemOne: [{
      id: "01",
      category: "It-A",
      isCreated: "true"
    }],
    itemDesc: [{
      id: "01",
      type: "A-1",
      isCreated: "true"
    }]
  },
  ItemID: '123'
}

组件代码 #

class ItemComp extends React.Component {
  state = {
    processingItems: []
  }

  onAddItemHandle = (processingItem) => {
    this.setState(prevState => ({
      processingItems: [...prevState.processingItems, processingItem]
    }))
  }
}

Jest测试代码 #

describe('handleonAddItem', () => {
  it('should allow to add multiple items based on prevState', () => {
    const compView = mountWithIntl(
      <ItemComp itemId={12} />
    )
    const instance = compView.find(ItemComp).instance();
    instance.onAddItemHandle(items) // 仅调用一次时逻辑正常
    instance.onAddItemHandle(items) // 第二次调用时测试失败
    expect(instance.state.processingItems).toEqual([items])
  })
})

问题分析与解决方案 #

测试失败的核心原因是断言的预期值错误：两次调用onAddItemHandle(items)后，processingItems状态应该包含两个items对象，即[items, items]，但当前断言写成了[items]，导致预期与实际结果不匹配。

修正后的断言代码：

expect(instance.state.processingItems).toEqual([items, items])

另外，组件中的setState使用了函数式更新（依赖prevState），这种写法是正确的，能确保每次状态更新都基于最新的前序状态，不会出现状态覆盖问题。

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