React 17+Jest+Testing Library中await测试的Lint错误解决求助

问题回顾 #

你在编写React组件测试时遇到了一系列lint和规则提示问题：

1. 初始测试代码能通过，但触发jest/valid-expect-in-promise警告，提示"Promise should be returned to test its fulfillment or rejection"
2. 尝试添加.catch()后，又触发testing-library/await-async-query错误，提示"findAllByRole must have await operator"
3. 改用try-catch后，测试通过但触发jest/no-conditional-expect错误，提示"Avoid calling expect conditionally"

先看你最初的测试代码：

test("should render text component", async () => { 
  render(<TextComponent />) 
  const headings = await screen.findAllByRole("heading") 
  expect(headings.length).toBe(1) 
})

错误原因拆解 #

• 第一个警告：其实你的初始代码逻辑是完全正确的！这个警告大概率是eslint-plugin-jest版本过旧或者规则配置的误判——你已经用await正确等待了异步查询的Promise，后续的expect是在Promise resolve后执行的，完全符合规范。
• .catch()的错误：findAllByRole是Testing Library的异步查询方法，必须用await来获取结果，直接链式调用.catch()会跳过await，违反了Testing Library的异步查询规则；同时expect(false)不是有效的错误处理函数，完全起不到捕获错误的作用。
• try-catch的错误：你的测试目标是验证组件正常渲染，不需要主动捕获错误——如果异步查询失败（比如找不到heading），async函数会自动抛出错误，Jest会标记测试失败，这才是你需要的测试逻辑。在catch分支里调用expect违反了Jest的规则，因为它不建议在条件分支中使用expect（除非你专门测试错误场景）。

正确解决方案 #

方案1：保留初始结构，解决lint警告 #

如果想保留你最初的代码结构，只需要处理lint警告即可：

• 升级你的eslint-plugin-jest到最新版本，新版本已经修复了这类误判问题。
• 或者在项目的.eslintrc配置文件中调整规则（如果确定代码没问题）：

{
  "rules": {
    "jest/valid-expect-in-promise": "warn" // 降级为警告，或者直接写"off"禁用
  }
}

方案2：使用resolves断言（推荐） #

这种写法直接对异步查询的Promise进行断言，完全符合Jest和Testing Library的最佳实践，也不会触发任何lint警告：

test("should render text component", async () => { 
  render(<TextComponent />) 
  // 直接断言Promise resolve后的结果长度为1
  await expect(screen.findAllByRole("heading")).resolves.toHaveLength(1)
})

这种写法的优势在于：它明确告诉Jest你要测试这个Promise的resolved状态，同时把异步查询和断言合并成一步，代码更简洁，也避免了lint规则的误解。

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