Mocha中测试props.history时Sinon stub的history.push未被调用如何解决

你遇到的stub未被调用的问题，可对照以下几点逐一排查修复：

• 组件命名不匹配：你定义的组件名称是Page1Page，但测试代码中渲染的是<Page1 />，如果没有做别名导出配置，实际渲染的不是目标组件，你传入的history props根本没有被组件接收，自然stub不会被调用。
• 组件内部代码存在语法错误：
  1. 声明username state时你写的是const [username, setStateUsername] = useState('')，但TextField的onChange回调中调用的是未定义的setUsername(val)，password的state更新也存在同样的命名错误，会导致逻辑中断。
  2. 组件return的代码块中，Stack标签结束后多了冗余的)}，属于语法错误，会导致组件渲染失败。
• 测试代码元素查询参数错误：组件中email输入框的label属性是emailLabel，但测试里你用screen.getByLabelText('email')查询，无法匹配到对应输入框，后续的change事件也不会触发到正确元素。
• 核心问题：组件未使用你传入的props.history
  如果你已经确认handleSubmit方法正常执行，说明组件内部调用的history.push不是你通过props传入的模拟对象，常见两种情况：
  1. 组件同时使用了react-router的useHistory（v5）/useNavigate（v6）钩子获取路由跳转对象，没有使用props传入的history，你传入的模拟对象根本没被用到。
  2. 测试时你给组件包裹了react-router的Router组件，Router自动注入的history覆盖了你传入的props，组件优先使用了官方注入的原生history对象。

修复步骤 #

1. 统一组件导出名和测试中导入渲染的组件名，确认测试渲染的是目标Page1Page组件。
2. 修正组件内的state更新函数名：把setUsername改为setStateUsername，setPassword改为setStatePassword，删掉return代码块中冗余的)}。
3. 修正测试中email输入框的查询参数：改为screen.getByLabelText('emailLabel')，和组件的label属性对应。
4. 如果组件使用了react-router钩子拿跳转对象，改为stub对应钩子的返回值，不要通过props传history；测试时不要给组件包裹额外的Router组件，避免原生history覆盖你的模拟对象。

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