React测试中如何为mockStore传入自定义Redux store解决属性报错

报错核心原因 #

你当前的传参位置和redux-mock-store的API定义不匹配，导致自定义的状态根本没有注入到mock store里：

• configureMockStore方法接收的第一个参数是中间件配置对象，用来配置store启用的自定义中间件，不是初始业务状态
• 调用configureMockStore之后会返回一个store工厂函数，真正的初始业务状态，需要传给这个工厂函数才能完成store的初始化

你现在把写好的serverConfiguration自定义状态，错传到了中间件配置的参数位置，真正创建mock store的时候拿到的是空初始状态，访问store.getState().serverConfiguration时这个值是undefined，再读它的testValue属性自然就抛出了类型错误。

正确实现代码 #

按照API的参数顺序拆分传参，就能让自定义状态生效：

// 1. 生成mock store工厂：传入中间件配置，无自定义中间件就传空对象
const createMockStore = configureMockStore({});
// 2. 调用工厂时传入预置的自定义状态，拿到带初始值的可用mock store
const store = createMockStore({
  serverConfiguration: {
    testValue: "Admin"
  }
});

实操注意事项 #

• 给测试环境的Provider组件传store时，必须用上面步骤2生成的带预置状态的实例，不要额外用真实Redux的createStore逻辑二次包裹，否则mock的初始状态会被覆盖
• mock的状态结构要和真实Redux store的顶层结构对齐：哪怕本次测试只用到serverConfiguration，也不要漏掉真实store顶层挂载的其他reducer切片，否则依然会触发嵌套属性读取的undefined报错
• 测试时如果需要校验组件触发的Redux动作，直接调用mock store自带的getActions()方法即可，不需要手动篡改已经注入的初始状态模拟效果

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