React Testing Library 如何校验多个元素满足指定断言条件

最简实现方案 #

你可以直接遍历获取到的按钮数组逐个断言，这是无额外依赖、兼容性最好的写法：

const buttons = screen.getAllByRole('button');
buttons.forEach(button => expect(button).toHaveAttribute('disabled'));

如果想要用单条断言完成校验，也可以选择以下写法：

• 直接校验数组全量满足条件：

const buttons = screen.getAllByRole('button');
expect(buttons.every(btn => btn.hasAttribute('disabled'))).toBe(true);

• 用Jest内置的each匹配器，报错时可直接定位到不符合要求的按钮序号：

const buttons = screen.getAllByRole('button');
expect.each(buttons)('第%#个按钮应该被禁用', button => {
  expect(button).toHaveAttribute('disabled')
})

优化提示 #

如果你的项目已经引入了@testing-library/jest-dom的配套匹配器，推荐把toHaveAttribute('disabled')替换为更语义化的toBeDisabled()，校验逻辑也更严谨，会覆盖CSS禁用、aria-disabled标记等多种禁用场景。

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