如何在React应用中使用Jest测试输入框value是否成功设置？

你遇到的问题核心有3点：

• 触发change事件后，你提前赋值的ele变量存储的是事件触发前的旧元素引用，enzyme不会自动更新该变量的内容
• 断言逻辑错误：enzyme封装的组件实例没有直接的value属性，需要通过.props()方法获取组件绑定的value属性
• 选择器仅用type筛选不够精准，容易匹配到其他同类型输入框

describe('Test case for testing login',() =>{
  let wrapper;
  test('username check',()=>
  {
    wrapper = shallow(<Login/>);
    // 用name属性精准匹配用户名输入框
    wrapper.find("FormControl[name='username']")
      .simulate("change", {target: { name:'username',value: 'UserFirst'}});
    // 事件触发后重新查找元素，读取props里的value做断言
    const updatedEle = wrapper.find("FormControl[name='username']");
    expect(updatedEle.props().value).toBe('UserFirst')
  })
})

如果修改后仍不生效，可添加强制更新逻辑适配旧版本enzyme：

const ele = wrapper.find("FormControl[name='username']");
ele.simulate("change", {target: { name:'username',value: 'UserFirst'}});
wrapper.update(); // 强制更新wrapper实例状态
const updatedEle = wrapper.find("FormControl[name='username']");
expect(updatedEle.props().value).toBe('UserFirst')

同时可自行检查Login组件内setName是否为useState返回的正确更新函数，无拼写或逻辑错误。

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