Jest中hasClass()方法异常：元素含目标类却返回false

这个问题看起来是Enzyme（配合Jest进行组件测试时）的hasClass方法在特定选择器下的行为差异导致的，我来帮你拆解原因和解决办法：

可能的原因 #

当你用.find('.preview-icon')定位元素后调用hasClass('is-disabled')返回false，但HTML明明显示类存在，核心原因大概率是Enzyme的hasClass方法并非直接读取渲染后的DOM类名，而是依赖于组件Wrapper内部维护的类名状态，在某些场景下（比如动态拼接类名、浅渲染的组件状态同步延迟），这个内部状态和实际渲染的DOM会出现不一致。

举个例子：如果你的组件是通过条件判断动态添加is-disabled类（比如className={preview-icon ${disabled ? 'is-disabled' : ''}}），Enzyme的shallow渲染可能在处理这种动态拼接的类名时，hasClass方法没有正确识别到后续添加的类；而当你用完整的复合选择器.preview-icon.is-disabled查找时，Enzyme是直接匹配渲染后的DOM元素，所以能正确找到并返回true。

解决办法 #

1. 直接检查DOM元素的类列表 #

绕过Enzyme的hasClass方法，直接获取真实DOM节点的classList来判断，结果更可靠：

test('Preview icon to be disabled', () => {
  const previewIcon = component.find('.preview-icon').at(0);
  expect(previewIcon.getDOMNode().classList.contains('is-disabled')).toBe(true);
});

2. 升级Enzyme及适配包 #

如果你的Enzyme版本较旧，可能存在hasClass方法的bug，尝试升级到对应React版本的最新稳定版：

• 确保enzyme、enzyme-adapter-react-xxx（xxx对应你的React主版本，比如16、17、18）是最新兼容版本
• 重新安装依赖后再测试

3. 检查组件的类名传递逻辑 #

如果你的组件是通过props接收类名，或者类名由父组件控制，可以直接检查props中的className是否包含目标类：

expect(component.find('.preview-icon').at(0).props().className).toContain('is-disabled');

关于你临时方案的说明 #

你用.exists()的方式能正常工作，是因为find('.preview-icon.is-disabled')是直接在渲染后的DOM中匹配同时拥有两个类的元素，这个匹配逻辑基于真实DOM，所以不会出现状态不一致的问题，是一个有效的临时替代方案。

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