@testing-library/react单元测试getBy queryBy和findBy的区别

关于查询

查询是测试库提供的在页面上查找元素的方法。 有几种类型的查询（“get”、“find”、“query”）； 它们之间的区别在于，如果没有找到元素，查询是否会抛出错误，或者它是否会返回一个 Promise 并重试。 根据您选择的页面内容，不同的查询可能或多或少是合适的。 有关如何使用语义查询以最易于访问的方式测试页面的建议，请参阅优先级指南。

选择元素后，可以使用事件 API 或用户事件来触发事件并模拟用户与页面的交互，或者使用 Jest 和 jest-dom 对元素进行断言。

有一些用于查询的测试库帮助器方法。 当元素响应操作出现和消失时，可以使用 waitFor 或 findBy 查询等异步 API 来等待 DOM 中的更改。 仅查找作为特定元素的子元素的元素，可以使用 within。 如有必要，还可以配置一些选项，例如重试超时和默认 testID 属性。

示例

import {render, screen} from '@testing-library/react' // (or /dom, /vue, ...)

test('should show login form', () => {
  render(<Login />)
  const input = screen.getByLabelText('Username')
  // Events and assertions...
})

查询类型

单元素

getBy...：返回查询的匹配节点，如果没有元素匹配或找到多个匹配项，则抛出描述性错误（如果需要多个元素，则使用 getAllBy 代替）。

queryBy...：返回查询的匹配节点，如果没有元素匹配则返回null。 这对于断言不存在的元素很有用。 如果找到多个匹配项，则抛出错误（如果可以，请改用 queryAllBy）。

findBy...：返回一个 Promise，当找到与给定查询匹配的元素时解析该 Promise。 如果未找到任何元素或在默认超时 1000 毫秒后找到多个元素，则承诺将被拒绝。 如果需要查找多个元素，请使用 findAllBy。

多元素

getAllBy...：返回查询的所有匹配节点的数组，如果没有元素匹配则抛出错误。

queryAllBy...：返回一个查询所有匹配节点的数组，如果没有元素匹配则返回一个空数组（[]）。

findAllBy...：返回一个Promise，当找到与给定查询匹配的任何元素时，该承诺将解析为一个元素数组。 如果在默认超时 1000 毫秒后未找到任何元素，则承诺将被拒绝。

findBy 方法是 getBy* 查询和 waitFor 的组合。 他们接受 waitFor 选项作为最后一个参数（即 await screen.findByText('text', queryOptions, waitForOptions)）。

参考文档：https://testing-library.com/docs/queries/about