Redux Reducer测试：如何在状态中添加模拟测试数据？

我来帮你一步步解决这两个关于Redux reducer测试的问题：

问题2：为现有测试用例添加状态测试数据（解决空状态报错） #

首先，你的测试报错的核心原因是：当前传入Reducer的初始状态是空的，但FILTER_SELECTED action是用来更新已存在的filterGroup的——状态里没有1234这个filterGroup的键，reducer自然无法找到对应的selectedFilters去更新。

解决方法很简单：给Reducer传入一个包含目标filterGroup的测试初始状态，而不是空的filters对象。修改后的测试代码如下：

it("should store selected filter", () => { 
  // 1. 定义带有测试数据的初始状态
  const initialTestState = {
    1234: {
      id: 1234,
      selectedFilters: [] // 可以是空数组，也可以提前加一些测试用的过滤项
    }
  };

  const selectedFilterData = { id: 4321, filterGroupId: 1234, filterName: "gender", text: "Male", value: "pdl_profile_gender_1" }
  const action = { type: FILTER_SELECTED, data: selectedFilterData }

  // 2. 把初始测试状态传给Reducer，而不是空状态
  Reducer(initialTestState).expect(action).toReturnState({ 
    1234: { 
      id: 1234, 
      selectedFilters: [ 
        { id: 4321, filterName: "gender", text: "Male", value: "pdl_profile_gender_1" } 
      ] 
    } 
  })
})

如果你的业务逻辑要求FILTER_SELECTED action可以新增一个不存在的filterGroup，那你需要检查reducer的逻辑是否处理了“状态中没有对应filterGroup”的情况（比如用对象展开或者Object.assign来新增键），但如果这个action就是专门用来更新已存在的分组，那上面的修改就能解决报错问题。

问题1：模拟状态测试删除操作的Redux reducer #

测试删除逻辑的核心思路是：先构造一个包含要删除数据的初始状态，然后触发删除action，最后断言状态中目标数据已被移除。具体步骤如下：

1. 构造带测试数据的初始状态 #

先模拟一个真实的状态场景，比如某个filterGroup下有多个选中的过滤项，其中一个是我们要删除的。

2. 定义删除action #

根据你的业务逻辑，构造对应的删除action（比如携带要删除的filterGroupId和filterId）。

3. 调用Reducer并断言结果 #

传入初始状态和删除action，验证返回的状态是否符合预期（目标过滤项已被移除）。

举个完整的测试代码例子：

it("should remove the selected filter", () => {
  // 1. 构造带测试数据的初始状态
  const initialTestState = {
    1234: {
      id: 1234,
      selectedFilters: [
        { id: 4321, filterName: "gender", text: "Male", value: "pdl_profile_gender_1" },
        { id: 5678, filterName: "age", text: "18-24", value: "pdl_profile_age_1" }
      ]
    }
  };

  // 2. 定义删除action
  const deleteAction = { 
    type: FILTER_DELETED, 
    data: { filterGroupId: 1234, filterId: 4321 } 
  };

  // 3. 断言删除后的状态
  Reducer(initialTestState).expect(deleteAction).toReturnState({
    1234: {
      id: 1234,
      selectedFilters: [
        { id: 5678, filterName: "age", text: "18-24", value: "pdl_profile_age_1" }
      ]
    }
  });
})

额外的测试小技巧 #

• 覆盖多种场景：测试reducer时，要覆盖空状态、部分数据状态、全量数据状态等不同情况，确保逻辑的健壮性。
• 保持reducer纯函数：确保reducer不会修改传入的初始状态，而是返回一个新的状态对象——这是Redux的核心要求，也是测试的基础。
• 匹配状态结构：测试用的初始状态结构必须和reducer期望的状态结构完全一致，避免因为结构不匹配导致的错误。

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