React Testing Library+Jest：为何用toHaveLength测试按钮存在失败？

我刚开始学习React Testing Library结合Jest，在教程实践中遇到问题：

App组件代码如下：

const App = () => {
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <button>Add User</button>
    </form>
  );
}

编写测试时，以下测试代码报错：

test('shows 2 inputs and a button', async () => {
    render(<App />);
    const btn = await screen.findByRole('button');
    expect(btn).toHaveLength(1)
})

但改用如下断言则正常运行：

test('shows 2 inputs and a button', async () => {
    render(<App />);
    const btn = await screen.findByRole('button');
    expect(btn).toBeInTheDocument()
})

请问为何第一个测试中使用toHaveLength断言按钮存在会失败？

• findByRole方法在匹配到单个元素时，返回的是单个DOM元素，而非数组。toHaveLength是用于断言数组、字符串这类具有length属性的对象的长度，直接对DOM元素调用该方法会报错——因为DOM元素本身没有length属性。
• 如果想用toHaveLength验证按钮数量，应该改用screen.getAllByRole('button')，它会返回所有匹配的DOM元素组成的数组，此时就可以用expect(btn).toHaveLength(1)来断言数组长度为1。
• toBeInTheDocument()是React Testing Library专门提供的断言方法，作用就是验证单个DOM元素是否存在于文档中，所以对findByRole返回的单个元素使用这个断言完全符合用法。

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