Testing Library 规则

eslint-plugin-testing-library 插件专注于 React/Vue 组件的测试，特别是当你在使用 Testing Library 时。它会强制执行一些最佳实践，编写出更符合用户行为、更可维护的 React/Vue 测试。

注意

在编写测试代码时，可以适当关闭一些规则，避免过于严格的检查影响开发效率。但是，仍然鼓励遵循这些规范，以提高代码质量和可维护性。

React Testing Library

// .eslintrc.js

module.exports = {
  extends: [
    'plugin:testing-library/react',
  ],
};

规则名称	错误级别	配置选项	描述
testing-library/await-async-events	error	{ eventModule: 'userEvent' }	强制异步事件操作（如 userEvent) 必须使用 await
testing-library/await-async-queries	error	-	强制异步查询（如 findBy*) 必须使用 await
testing-library/await-async-utils	error	-	强制异步工具函数（如 waitFor) 必须使用 await
testing-library/no-await-sync-events	error	{ eventModules: ['fire-event'] }	禁止对同步事件（如 fireEvent) 使用 await
testing-library/no-await-sync-queries	error	-	禁止对同步查询（如 getBy*/queryBy*) 使用 await
testing-library/no-container	error	-	禁止直接使用 container 操作 DOM 节点
testing-library/no-debugging-utils	warn	-	避免提交代码中遗留调试工具（如 debug()）
testing-library/no-dom-import	error	'react'	强制使用框架专用库（如 @testing-library/react）代替通用 DOM 库
testing-library/no-global-regexp-flag-in-query	error	-	禁止在查询中使用正则表达式全局匹配标志（/g）
testing-library/no-manual-cleanup	error	-	强制使用自动清理机制代替手动清理
testing-library/no-node-access	error	-	禁止通过 container 访问非 React 节点
testing-library/no-promise-in-fire-event	error	-	禁止在 fireEvent 方法中返回 Promise
testing-library/no-render-in-lifecycle	error	-	禁止在生命周期方法中调用 render
testing-library/no-unnecessary-act	error	-	避免不必要的 act 方法包裹
testing-library/no-wait-for-multiple-assertions	error	-	禁止在单个 waitFor 中包含多个断言
testing-library/no-wait-for-side-effects	error	-	禁止在 waitFor 回调中执行副作用
testing-library/no-wait-for-snapshot	error	-	禁止在 waitFor 中使用快照断言
testing-library/prefer-find-by	error	-	推荐使用 findBy* 代替 waitFor + getBy*
testing-library/prefer-presence-queries	error	-	推荐使用 getBy* 代替 queryBy* 检查元素存在
testing-library/prefer-query-by-disappearance	error	-	推荐使用 queryBy* 检查元素消失
testing-library/prefer-screen-queries	error	-	推荐使用 screen 对象进行查询
testing-library/render-result-naming-convention	error	-	强制 render 结果变量使用统一命名规范

Vue Testing Library

// .eslintrc.js

module.exports = {
  extends: [
    'plugin:testing-library/vue',
  ],
};

规则名称	错误级别	配置选项	描述
testing-library/await-async-events	error	{ eventModule: ['fireEvent', 'userEvent'] }	强制异步事件操作（包括 fireEvent 和 userEvent）必须使用 await
testing-library/await-async-queries	error	-	强制异步查询（如 findBy*) 必须使用 await
testing-library/await-async-utils	error	-	强制异步工具函数（如 waitFor) 必须使用 await
testing-library/no-await-sync-queries	error	-	禁止对同步查询（如 getBy*/queryBy*) 使用 await
testing-library/no-container	error	-	禁止直接使用 container 操作 DOM 节点
testing-library/no-debugging-utils	warn	-	避免提交代码中遗留调试工具（如 debug()）
testing-library/no-dom-import	error	'vue'	强制使用 Vue 专用库（@testing-library/vue）代替通用 DOM 库
testing-library/no-global-regexp-flag-in-query	error	-	禁止在查询中使用正则表达式全局匹配标志（/g）
testing-library/no-manual-cleanup	error	-	强制使用自动清理机制代替手动清理
testing-library/no-node-access	error	-	禁止通过 container 访问非框架节点
testing-library/no-promise-in-fire-event	error	-	禁止在 fireEvent 方法中返回 Promise
testing-library/no-render-in-lifecycle	error	-	禁止在生命周期方法中调用 render
testing-library/no-wait-for-multiple-assertions	error	-	禁止在单个 waitFor 中包含多个断言
testing-library/no-wait-for-side-effects	error	-	禁止在 waitFor 回调中执行副作用
testing-library/no-wait-for-snapshot	error	-	禁止在 waitFor 中使用快照断言
testing-library/prefer-find-by	error	-	推荐使用 findBy* 代替 waitFor + getBy*
testing-library/prefer-presence-queries	error	-	推荐使用 getBy* 代替 queryBy* 检查元素存在
testing-library/prefer-query-by-disappearance	error	-	推荐使用 queryBy* 检查元素消失
testing-library/prefer-screen-queries	error	-	推荐使用 screen 对象进行查询
testing-library/render-result-naming-convention	error	-	强制 render 结果变量使用统一命名规范