React（Jest/Enzyme）单元测试：输入框类名未更新

看起来你的测试遇到了类名判断不通过的情况——虽然输入值已经成功更新，但类名的断言始终失败。结合你提供的组件和测试代码，我整理了几个最可能的原因和对应的解决方案：

1. 类名拼接时缺少空格，基础类名被覆盖 #

先看你组件里的className写法：

className={`solutions__mail-input${!readyToSend ? "--invalid" : ""}`}

当!readyToSend为true时，这段代码会生成solutions__mail-input--invalid这个单一类名，而不是solutions__mail-input和--invalid两个独立类。这时候hasClass("solutions__mail-input")自然会返回false，因为这个基础类名根本不存在于DOM元素上。

修复方案：在拼接时添加空格，把两个类名分开：

className={`solutions__mail-input ${!readyToSend ? "--invalid" : ""}`}

这样不管readyToSend的值是什么，solutions__mail-input都会作为独立类存在，你的断言就能正常通过了。

2. 状态更新后未触发组件重新渲染 #

Enzyme的shallow渲染在模拟事件后，有时不会自动触发组件的重新渲染——尤其是当validateMail()内部包含异步状态更新逻辑（比如依赖定时器、API请求）时，状态变更后的渲染可能会滞后。

修复方案：在模拟change事件后，手动调用update()方法强制组件重新渲染：

it("test valid mail", () => { 
  const solutions = shallow(<Solutions />); 
  const inputEmail = solutions.find("#mail"); 
  inputEmail.simulate("change", { target: { value: "test@test.com", name: "mail" }, }); 
  // 手动更新组件，确保状态变更后的渲染生效
  solutions.update();
  expect(solutions.find("#mail").props().value).toBe("test@test.com"); 
  expect(solutions.find("#mail").hasClass("solutions__mail-input")).toEqual(true); 
});

3. 验证逻辑未正确更新readyToSend状态 #

如果validateMail()函数在输入test@test.com时，没有把readyToSend设置为true，那么即使类名拼接正确，--invalid后缀依然会存在；如果此时类名拼接没有空格，还是会导致基础类名不存在。

验证方法：在测试中添加对readyToSend状态的断言，确认它在输入有效邮箱后被正确设置：

expect(solutions.state().readyToSend).toBe(true);

如果这个断言失败，你需要检查validateMail()的逻辑，确保它能正确识别test@test.com为有效邮箱，并更新readyToSend状态。

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