使用 testing-library-selector 创建可重用的选择器

像你们中的许多人一样，我喜欢重用代码，从而尽可能减少重复。我发现了什么 测试库查询 是我在不同的测试文件中一遍又一遍地写相同的。对我来说，它的缺点如下：

• 当我更改元素时，查询不匹配它，我需要更新它们中的每一个；
• 代码可读性很糟糕。我需要花时间阅读 RTL 查询以了解它找到了我需要的元素。简单的解决方案是为每个查询创建一个变量，但这会增加额外的代码。除此之外，我需要在单独的测试中一遍又一遍地创建这些变量，因为为了使查询能够工作，应该做出不同的先决条件（例如按钮单击、微调器消失），这又是代码的重复.此外，它仅适用于每个测试文件。

让我们通过一个例子来讨论这个问题。想象一下，我们有一个零件。典型的模态有以下元素：

• 标题
• 模态上下文中的文本
• X 按钮关闭模式
• 取消 按钮关闭模式
• 动作按钮来启动一些动作

典型的应用程序有许多具有不同内容但具有相同 DOM 元素的模式。上述元素的 RTL 选择器可能如下所示：

 expect(screen.getByTestId("modal-title")).toHaveText(...);  
 expect(screen.getByTestId("modal-body")).toHaveText(...);  
 fireEvent.click(screen.getByRole("button", { text: "Close" }));  
 fireEvent.click(screen.getByRole("button", { text: "Cancel" }));  
 fireEvent.click(screen.getByRole("button", { text: "Submit" }));

由于上述原因，将查询存储在变量中的建议选项不会改善很多。此外，这里我们仅 得到* 查询。所以当我们需要的时候应该重写它们 询问* , 寻找* 变体。

这是我遇到的时候 测试库选择器 中的 生态系统 测试库文档的部分。使用其简单的 API，我们可以解决所有问题：

• 创建一个包含可重用查询的文件。这样，如果选择器应该改变，我们只需要更新一个地方。

  模态/测试/ui.ts 从“测试库选择器”导入 { byTestId, byRole }； 常量 ui = {
  标题：byTestId（“模态标题”），
  正文：byTestId（“模态体”），
  closeButton: byRole("button", { text: "Close" }),
  cancelButton: byRole("button", { text: "Cancel" }),
  submitButton: byRole("button", { text: "Submit" }),
  };

• 并在我们需要它们的地方以及我们需要它们的地方使用它。注意它是如何提高代码可读性的。

  模态/模态.test.tsx 从“./tests/ui”导入{ ui}； 期望(ui.title.get()).toHaveText(...);
  期望(ui.body.get()).toHaveText(...);
  fireEvent.click(ui.closeButton.get());
  fireEvent.click(ui.cancelButton.get());
  fireEvent.click(ui.submitButton.get()); // 检查标题不存在
  期望（ui.title.query()).not.toBeInTheDocument(); // 当我们需要等待 modal 到应用程序时，异步检查标题内容
  期望（等待 ui.title.find()).toHaveText(...);

如果您需要将这些选择器用作其他测试的一部分，我更喜欢通过使用组件名称作为前缀和单词 UI 作为结尾（例如 ModalUI）来命名此类导入：

 ProductDetails/ProductDetails.test.tsx 从“../Modal/tests/ui”导入 { ui as ModalUI }; // 这里我将选择器与测试一起保存在文件中，因为它们只需要在这个文件中（你可能会发现从测试文件中导出它而不是像我那样创建文件很诱人<Modal/>组件以防在其他测试中需要它们，但实际上[ 不推荐](https://github.com/jest-community/eslint-plugin-jest/blob/main/docs/rules/no-export.md) )  
 常量 ui = {  
 removeProductButton: byRole("button", "Remove"),  
 ...  
 }; it("点击删除按钮时应该打开删除产品模式", () => {  
 fireEvent.click(ui.removeProductButton.get()); 期望(ModalUI.title.get()).toBeInTheDocument();  
 });

结论

测试库选择器 library 是一个有用的库，可以创建可重用的选择器，使我们的代码可读。我喜欢。希望您觉得这篇文章很有用，并与我分享您解决此问题的方法。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/22004/59480707