@testing-library/react 等模块的作者总结的几种常见的使用 testing library 的错误方式，摘录一些

不使用 screen

screen 是 6.11.x 版本引入的特性， import { screen } from '@testing-library/react' 即可。相比常用的 const { container } = render(...) 再用 container 去查，改用 screen 就可以省去这些繁琐，需要查找 dom 的时候直接调用 screen 相关方法即可。

使用老派断言

宁愿用 expect(button.disabled).toBe(true) 而不用 expect(button).toBeDisabled() ，后者来自 @testing-library/jest-dom

使用老派 dom 检索方式

作者列举了一些常见的直接用 querySelector 等 api 编写单测的方式，推荐大家忘掉这些 api，改用封装得更好的 getByRole(role, opts) ，例如：

  1. // ❌
  2. const {container} = render(<Example />)
  3. const button = container.querySelector('.btn-primary')
  4. expect(button).toHaveTextContent(/click me/i)
  6. // ✅
  7. render(<Example />)
  8. screen.getByRole('button', {name: /click me/i})

不使用 user-event

新提供的 @testing-library/user-event 在原有的 fireEvent 基础上提供了更贴近真是事件输入的封装，比如点击文本框输入文字，实际触发事件的顺序可能是 keyDown、keyPress、keyUp。还有一些不太容易模拟的复制、粘贴、上传文件等场景，这个新封装的库中都有提供。

其实是一篇安利 Testing Library 新特性的软文，上面摘了几个我认为比较重要的，日常工作里我基本也都是原生 api 那一派的，所以对文中观点保留意见，大家看了随便试，出问题找作者🕶️。