React+Redux+TypeScript测试环境搭建及状态报错排查

搭建基于React、Redux、TypeScript技术栈的应用测试环境时，使用@testing-library/react、redux-mock-store、MemoryRouter编写Login组件渲染测试用例出现运行异常：
最初传入mock store的初始状态直接平铺了user、loading、error字段，运行测试时组件内useAppSelector读取state.auth.loading抛出错误：

TypeError: Cannot read property 'loading' of undefined

报错核心是mock初始状态结构与项目中combineReducers生成的真实store结构不匹配：

• 真实store顶层按业务拆分了auth、error两个状态切片
• user、loading、error属性实际归属于auth切片，直接在mock状态顶层平铺字段会导致state.auth为undefined，读取其子属性时就会触发上述类型错误

• 从authReducer模块中导出该切片对应的initialState，避免手动拼接状态时出现层级错误、字段遗漏
• 构造包含顶层auth字段的初始状态，保证结构和真实store完全对齐后再传入mock store，调整后测试用例即可顺利运行通过

注意：编写Redux相关单元测试时，优先复用对应reducer导出的initialState构造测试状态，不要凭空手写mock状态结构，能从根源上避免状态结构不匹配的问题

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