是否真的有必要检查 getBy 或 findBy 方法是否返回真实值？

Posted 2023-02-19

【中文标题】是否真的有必要检查 getBy 或 findBy 方法是否返回真实值？

【英文标题】：Is it really necessary to check if getBy or findBy methods returns truthy values?

【发布时间】：2021-12-10 10:03:33

【问题描述】：

我在使用测试库的前端项目方面有一些经验，但我绝对不是专家。在大多数项目的代码审查过程中，发现一些具有这种结构的测试套件真的很常见：

// Original code: https://github.com/callstack/react-native-testing-library/blob/0ede61780bd8788dfa09572643a14c9988c7b92b/examples/reactnavigation/src/__tests__/AppNavigator.test.js#L24

test('clicking on one item takes you to the details screen', async () => 
    const component = (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );

    const  findByText  = render(component);
    const toClick = await findByText('Item number 5');

    fireEvent(toClick, 'press');

    // ---------------- is this neccessary? --------------------

    const newHeader = await findByText('Showing details for 5');
    const newBody = await findByText('the number you have chosen is 5');

    expect(newHeader).toBeTruthy(); 
    expect(newBody).toBeTruthy();

    // ---------------------------------------------------------

);

我的疑问是，如果我们最终不会因为这种方法来检查 DOM 上是否存在元素而变得多余......

根据docs，如果我们使用getBy 或findBy，当没有匹配时应该会抛出错误。因此，我假设 getBy 无法返回虚假值，或者 findBy 无法解析虚假值。如果它是真的，那么也许我们不需要再次检查它。有意义吗？

所以我想知道如果我们这样做会不会很糟糕：

test('clicking on one item takes you to the details screen', async () => 
    const component = (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );

    const  findByText  = render(component);
    const toClick = await findByText('Item number 5');

    fireEvent(toClick, 'press');

    await findByText('Showing details for 5');
    await findByText('the number you have chosen is 5');
);

Idk 如果有意义，但 afaik 检查这些调用是否没有引发错误应该足以验证 DOM 上是否存在元素，对吗？

【问题讨论】：

是的，在这种情况下就足够了。但是，为了一致性和可读性，我发现最好有明确的断言（以expect 语句的形式）。

【参考方案1】：

抛开期望值可以更好地传达测试的意图，即使您认为它们并不是绝对必要的也是正确的。我也没有看到包含它们有任何明显的性能损失。

您可能更喜欢使用queryByText，它将返回一个元素或null，并让您编写在成功和失败情况下都调用的“正常”期望。但是，query 不会像find 那样等待谓词，因此您可以使用waitFor 来构建您自己的find。有关差异的详细信息，请参阅About Queries。

如果您expect 一个由文本不查询的元素不存在，我发现这会触发大型组件对象树差异，从而大大减慢测试速度（并且序列化循环结构可能会崩溃它）。您可以使用expect(!!queryByText("this shouldn't exist")).toBe(false); 将找到的元素转换为布尔值来避免这种情况。