在 React 测试库中使可重用的 get 方法

2022-11-17 15:27:04 阅读：206 来源： 互联网

在编写单元和集成测试时，我试图找到如何干净地编写它们的最佳方法。
我正在使用 React 测试库，因此已经很好地使用了良好的模式。
但是，最近我偶然发现我一次又一次地重复使用相同的方法来从 DOM 获取元素。

大多数情况下，使用名称 prop 用于按钮和输入。唯一的区别是第一个重新创建元素，后者返回输入的值。通常，我会以这种方式使用第一个：screen.getByRolescreen.getByLabelText

screen.getByRole('button', {name: /name of the button/i })

由于我喜欢使用名称而不必考虑某些字母的大写，因此我将参数“i”与正则表达式一起使用以忽略这种情况。此外，与正则表达式在一起，我不必担心它是一个完整的句子还是只是其中的一部分。

因此，我认为我可以用更可重用的方式提取这些方法，以便在测试套件中自由使用它们。

这是我是如何做到的：

const getButtonByName = (btnName) => {
  const regName = new RegExp(btnName, 'i')

  return screen.getByRole('button', { name: regName })
}

const getInputByLabel = (label) => {
  const regName = new RegExp(label, 'i')

  const { value } = screen.getByLabelText(regName)

  return value
}

然后我可以轻松使用它们：

  const button = getButtonByName('my button')
  const inputValue = getInputByLabel('my input label')

我以类似的方式为单选按钮制作了另一种方法。可以做更多的事情，但这是我使用最多的三种方法。所以对于其余的，它可能有点过度抽象。

在我看来，可以完成的另一个改进是使用固定对象（JS）或枚举（TS）更改名称（“我的按钮”等）的字符串。例如：

JS

const ButtonNames = Object.freeze({
    ButtonOne: "button one",
    ButtonTwo: "button two",
})

TS

enum ButtonNames {
  ButtonOne = "button one"
  ButtonTwo = "button two"
}

标签：React,测试库,编写单元,集成测试,编写,prop,输入,提取
来源：

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

ICode9

在 React 测试库中使可重用的 get 方法