在 React 测试库中使可重用的 get 方法
作者：互联网
在编写单元和集成测试时，我试图找到如何干净地编写它们的最佳方法。
我正在使用 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"
}