测试库中的 getByText、findByText 和 queryByText 有什么区别？

Question

获取元素文本内容的方法有多种：getByTextvs findByTextvs queryByText。
有时我对使用哪一个感到困惑。
我在反应本机中有以下示例：

it('should render children', () => {
  const mockedChildComponentTxt = 'Children are rendered';
  const { getByText, findByText, queryByText } = render(
    <MyProvider>
      <div>{mockedChildComponentTxt}</div>
    </MyProvider>,
  );
  expect(queryByText(mockedChildComponentTxt)).toBeTruthy()
});

queryByText虽然getByText失败了，但是findByText有效。

debug()导致：

<RNCSafeAreaView
    onInsetsChange={[Function anonymous]}
    style={
      Object {
        "flex": 1,
      }
    }
>
    <div>
      Children are rendered
    </div>
</RNCSafeAreaView>

为什么findByText在上面的例子中可以工作，但是getByText却queryByText失败了？

Answer 1

查找依据

findBy查询返回一个承诺，该承诺在找到匹配元素时解析。如果没有元素匹配或者在 1000 毫秒的默认超时后找到多个匹配项，则承诺将被拒绝。如果您需要查找多个元素，请使用findAllBy.

得到通过

getBy查询返回查询的第一个匹配节点，如果没有元素匹配或找到多个匹配，则抛出错误。如果您需要查找多个元素，请使用getAllBy.

查询依据

queryBy查询返回查询的第一个匹配节点，如果没有元素匹配则返回 null。这对于断言不存在的元素很有用。如果找到多个匹配项，则会抛出此异常（queryAllBy改为使用）。

文档

在您的示例中，渲染的组件包含文本“Children are render”，但似乎它可能无法立即在 DOM 中可用。
元素有可能在渲染后异步添加到 DOM 中，这就是为什么getByText无法queryByText立即找到它。然而，findByText它之所以有效，是因为它的异步特性会等待元素出现在 DOM 中

findBy查询返回一个承诺，该承诺在找到匹配元素时解析。

当它找到该元素时，测试就通过了。