React Testing Library中expect能否组合多个断言条件？

首先明确：React Testing Library 搭配原生 Jest、jest-dom 匹配器的默认环境下，不支持你示例中那种.and直接链式拼接多个断言的写法。包括toHaveClass在内的所有jest-dom匹配器，执行完断言后不会返回支持链式调用的expect实例，强行写这种链式语法会直接报错。

可行的合并写法 #

1. 优先用匹配器原生支持的多条件参数（推荐） #

toHaveClass本身就支持传入对象格式的参数，同时判断「存在某类、不存在某类」的逻辑，不需要额外依赖，是最稳定简洁的写法：

// 支持单行书写，换行仅为提升可读性
expect(firstItem).toHaveClass({
  [firstStyle]: true,
  [secondStyle]: false
});

这种写法的报错信息会精准提示哪个类名的状态不符合预期，和拆分两条断言的提示效果完全一致。

2. 高版本Jest原生支持多匹配器组合 #

如果你使用的Jest版本 >= 29.4.0，可以直接用Jest原生提供的.and()修饰符组合任意多个匹配器，写法如下：

expect(firstItem).and(
  expect.toHaveClass(firstStyle),
  expect.not.toHaveClass(secondStyle)
);

这种写法不限制匹配器类型，哪怕是toBeVisible、toHaveTextContent这类不同的匹配器，也可以放在同一个expect里组合判断。

注意事项 #

• 不推荐为了实现示例里的链式.and.not语法自行扩展匹配器，这类自定义写法维护成本高，报错信息可读性差，投入产出比极低。
• 实际编写单元测试时无需强行把多个断言合并为单行，拆分多条独立expect的写法可读性更高，问题定位速度更快，是行业内更推荐的实践。

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