测试选择器
强制执行 data-test-id (对大小写敏感的)属性存在于交互式DOM元素上来帮助UI测试.
- ❌
<button>Download</button> - ✅
<button data-test-id="download-button">Download</button>
安装
你首先需要安装 ESLint 语录,这需要 节点.js (注意: eslint-plugin-test-selectors 需要节点.js 10+):
$ yarn add eslint --dev
下一个,安装 @corva/eslint-plugin-test-selectors数字 :
$ yarn add @corva/eslint-plugin-test-selectors --dev
使用量
添加 @corva/test-selectors 到您的插件区 .eslintrc 配置文件 :
{
"plugins": ["@corva/test-selectors"]
}
如果您想要使用所有推荐的默认规则, 您可以简单地将此行添加到 extends 区域 .eslintrc 配置 :
{
"extends": ["plugin:@corva/test-selectors/recommended"]
}
默认情况下, 全部运行 支持的规则 你应当发出警告, 如果要更严格,可以使用 plugin:@corva/test-selectors/recommendedWithErrors。 。 。 .
另一种选项:您也可以在 rules 区域 .eslintrc 配置 。 例如,如果你只想启用 @corva/test-selectors/button 规则,跳过 extends 以上添加,并在 rules 区域 .eslintrc 配置 :
{
"rules": {
"@corva/test-selectors/button": ["warn", "always"]
}
}
如果您喜欢大部分推荐规则,请添加 extends 选项上,但发现一个特别麻烦,你可以简单地禁用它:
{
"rules": {
"@corva/test-selectors/anchor": "off"
}
}
注:见 支持的规则 下面是完整的清单.
自定义规则选项
所有测试都可以通过传递一个具有以下一个或多个属性的物体单独定制.
测试属性
预期的默认测试属性是 data-test-id但你可以随心所欲地推翻它 这是你如何使用 data-some-custom-attribute 相反:
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": "data-some-custom-attribute" }
]
}
}
注意: 您也可以通过多个属性
{
"rules": {
"@corva/test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": ["data-testid", "testId"] }
]
}
}
忽略已失效
默认情况下,所有元素 disabled 属性被忽略,例如:. <input disabled />如果您不想忽略此属性, 设置 ignoreDisabled 改为 false数字 :
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}
忽略只读
默认情况下,所有元素 readonly 属性被忽略,例如:. <input readonly />如果您不想忽略此属性, 设置 ignoreReadonly 改为 false数字 :
{
"rules": {
"@corva/test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}
仅限 html
仅支持于 button 规则,此选项将使名为按钮的 React 组件免于规则.
{
"rules": {
"@corva/test-selectors/button": ["warn", "always", { "htmlOnly": true }]
}
}
支持的规则
@corva/test-selectors/anchor@corva/test-selectors/button@corva/test-selectors/input@corva/test-selectors/onChange@corva/test-selectors/onClick@corva/test-selectors/onKeyDown@corva/test-selectors/onKeyUp@corva/test-selectors/onSubmit