javascript - React 测试库 - 避免 getBy？-6ren

javascript - React 测试库 - 避免 getBy？

转载作者：行者123 更新时间：2023-11-28 21:15:35

25

4

当使用 React 测试库测试组件时，我发现自己从 getBy* 开始，偶尔需要用 queryBy* 替换它(例如，如果我需要检查因为元素不存在)。我的测试以 getBy 和 queryBy 的混合结束，我最近一直在使用 queryBy 来处理所有事情。

这让我开始思考...是否有理由使用 getBy？

像这样的断言会按预期失败，而无需抛出错误:

expect(queryByText('Click me')).toBeInTheDocument();
expect(queryByLabel('Name').value).toBe('George')

如果未找到元素则抛出错误有什么好处，是否有理由不对所有(同步)查询使用 queryBy？

编辑: 看起来 queryBy 现在仅推荐用于断言文档中不的内容:

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence

文章还推荐使用 screen.queryBy/screen.getBy 而不是从 render 解构，这样可以简化从一个到另一个的更改，因为您不再需要更新解构函数。

最佳答案

如您所述，getBy* 和 queryBy* 之间的区别在于，如果找不到元素，getBy* 会抛出错误，而 queryBy* 不会。对我来说，如果我期望某物在那里，我总是使用 getBy* 并且仅在我断言某物不存在的情况下使用 queryBy*。如果一个元素没有出现，我希望它出现，我想在测试中尽早知道它，这是进行 getBy* 调用的地方。

所以我想说抛出错误的好处是你总是确保你的测试失败将指向根本问题(无法找到你期望存在的元素)而不是该根源的副作用问题(尝试将该元素用于稍后的测试)。

示例测试:

    const { getByTestId, queryByTestId } = render(getComponent());

    const textInput = queryByTestId("textInput");

    fireEvent.change(textInput, { target: { value: "hello" } });
    fireEvent.change(textInput, { target: { value: "hi" } });

使用queryByTestId，测试输出为:

Unable to fire a "change" event - please provide a DOM element.

      23 |     const textInput = queryByTestId("textInput") as any;
      24 |
    > 25 |     fireEvent.change(textInput, { target: { value: "hello" } });
         |               ^
      26 |     fireEvent.change(textInput, { target: { value: "hi" } });
      27 |

所以它确实表明未找到 textInput。如果我将其更改为 getByTestId，则输出为

Unable to find an element by: [data-testid="textInput"]

    <body>
      <div>
        <div>
          <button
            type="button"
          >
            Show the Text Input!
          </button>
        </div>
      </div>
    </body>

      21 |     const { getByTestId, queryByTestId, rerender } = render(getComponent());
      22 |
    > 23 |     const textInput = getByTestId("textInput") as any;
         |                       ^
      24 |
      25 |     fireEvent.change(textInput, { target: { value: "hello" } });
      26 |     fireEvent.change(textInput, { target: { value: "hi" } });

所以 getBy* 错误输出在我看来有两个优点:

它直接指向有问题的那一行。不难发现查询“textInput”是第一种情况的问题。但它有点不直接。
当我使用 getBy* 时，它会自动打印出 DOM 的样子。这有助于确定我要查找的内容不存在的原因。一旦 queryBy* 测试失败，这很可能是我要采取的第一步，所以它会自动出现，这很好。

这些边际开发体验改进值得我使用 getBy* 变体作为默认变体。通常我只在我的测试中使用 getBy* 并且只在断言某些东西不存在很重要时才使用 queryBy* 。当然，只使用 queryBy* 是可能的，如果您发现使用这两种方法的成本大于 yield ，您可以自由地这样做。

关于javascript - React 测试库 - 避免 getBy？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58857019/

25

4

0

文章推荐： validation - 如何使用 NestJS 和类验证器手动测试输入验证

文章推荐： javascript - 如何在 Cypress 中断言 localStorage

文章推荐： javascript - 不知道如何排序这个 JSON 对象 jQuery/JavaScript

文章推荐： javascript - 加载时随机化子元素

perl - 避免 Mojolicious 异步行为？避免 "AnyEvent::CondVar: recursive blocking wait attempted"
我们已经有一个使用 AnyEvent 的库。它在内部使用 AnyEvent，并最终返回一个值(同步 - 不使用回调)。有什么方法可以将这个库与 Mojolicious 一起使用吗？它的作用如下: #
JAXB 避免 JAXBElement
我想从 XSD 文件生成带有 JAXB 的 Java 类。问题是，我总是得到一些像这样的类(删除了命名空间): public static class Action { @X
javascript - 避免/禁用自动跳转到输入字段
我有一个关于 html 输入标签或 primefaces p:input 的问题。为什么光标总是自动跳转到输入字段。我的页面高度很高，因此您需要向下滚动。输入字段位于页面末尾，光标自动跳转(加载)到页
oop - 避免 if 语句
我今天在考虑面向对象设计，我想知道是否应该避免 if 语句。我的想法是，在任何需要 if 语句的情况下，您都可以简单地创建两个实现相同方法的对象。这两个方法实现只是原始 if 语句的两个可能的分支。
java - 避免 NullPointerException
String graphNameUsed = graphName.getName(); if (graphType.equals("All") || graphType.equals(
mysql - 避免/删除表中的重复行
我有一张友谊 table CREATE TABLE IF NOT EXISTS `friendList` ( `id` int(10) NOT NULL, `id_friend` int(10
c - 避免 if in 循环
上下文 Debian 64。Core 2 二人组。摆弄循环。我使用了同一循环的不同变体，但我希望尽可能避免条件分支。但是，即使我认为它也很难被击败。我考虑过 SSE 或位移位，但它仍然需要跳转(
java - 避免 OutOfMemoryError
我最近在 Java 中创建了一个方法来获取字符串的排列，但是当字符串太长时它会抛出这个错误:java.lang.OutOfMemoryError: Java heap space我确信该方法是有效的，
c++ - 避免 while (!is_eof)
我正在使用 (C++) 库，其中需要使用流初始化对象。库提供的示例代码使用此代码: // Declare the input stream HfstInputStream *in = NULL; tr
MySQL 避免 WHERE/AND 中的子查询重复
我有一个 SQL 查询，我在 WHERE 子句中使用子查询。然后我需要再次使用相同的子查询将其与不同的列进行比较。我假设没有办法在子查询之外访问“emp_education_list li”？我猜
android - 避免 NetworkOnMainThreadException
我了解到在 GUI 线程上不允许进行网络操作。对我来说还可以。但是为什么在 Dialog 按钮点击回调上使用这段代码仍然会产生 NetworkOnMainThreadException ？ new T
C++ 避免 if & 硬编码字符串
有没有办法避免在函数重定向中使用 if 和硬编码字符串，想法是接收一个字符串并调用适当的函数，可能使用模板/元编程.. #include #include void account() {
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c++ - 避免/检测对导出文件的操纵
我正在开发 C++ Qt 应用程序。为了在应用程序或其连接的设备出现故障时帮助用户，程序导出所有内部设置并将它们存储在一个普通文件(目前为 csv)中。然后将此文件发送到公司(例如通过邮件)。为避免
java - 避免 instanceof
我有一组具有公共(public)父类(super class)的 POJO。这些存储在 superclass 类型的二维数组中。现在，我想从数组中获取一个对象并使用子类的方法。这意味着我必须将它们转
java - 避免 "for"语句中的空指针异常
在我的代码中，当 List 为 null 时，我通常使用这种方法来避免 for 语句中的 NullPointerException: if (myList != null && myList.size
c - 避免 TIME_WAIT
我正在尝试避免客户端出现 TIME_WAIT。我连接然后设置 O_NONBLOCK 和 SO_REUSEADDR。我调用 read 直到它返回 0。当 read 返回 0 时，errno 也为 0。我
c - 避免/减轻每次函数调用后返回值检查的痛苦的方法？
在不支持异常的语言和/或库中，许多/几乎所有函数都会返回一个值，指示其操作成功或失败 - 最著名的例子可能是 UN*X 系统调用，例如 open( ) 或 chdir()，或一些 libc 函数。无
R 按值选择，避免 NA
我尝试按值提取行。 col1 df$col1[col1 == "A"] [1] "A" NA 当然我只想要“A”。如何避免 R 选择 NA 值？顺便说一句，我认为这种行为非常危险，因为很多人都会陷入
R 避免 rowwise() 并寻找更快的替代方案
我想将两个向量合并到一个数据集中，并将其与函数 mutate 集成为 5 个新列到现有数据集中。这是我的示例代码: vector1% rowwise()%>% mutate(vector2|>

首页

博学

6Ren·AI

商城

javascript - React 测试库 - 避免 getBy？