ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-09-07 08:35:10  阅读:418  来源: 互联网

标签:get button testing library click ui 测试 选择器


使用 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

标签:get,button,testing,library,click,ui,测试,选择器
来源: https://www.cnblogs.com/amboke/p/16663970.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有