作为前端开发人员，我们知道测试是保证产品质量的不可或缺的一环。然而，编写高质量的测试代码并不是一件容易的事情，而 ESLint 是一个帮助我们避免常见错误和提高代码质量的工具。因此，在此介绍一个新的 npm 包 eslint-plugin-testing-library，帮助我们更好的编写测试代码。
简介
eslint-plugin-testing-library 是一个由开源社区提供的测试库，它主要用于检测测试用例的代码质量，帮助我们避免一些容易出错的宅街，如：没有正确的异步测试、使用不安全的选择器、没有清除渲染器等等。除此之外，还提供了一些命令行提示，让我们可以更加高效地编写测试用例。
安装
在使用之前，我们需要先安装 eslint-plugin-testing-library。我们可以通过 npm 安装，在项目的根目录下执行以下命令即可：
npm install --save-dev eslint-plugin-testing-library
安装之后，我们还需要在 ESLint 的配置文件中加入插件：
"plugins": [ "testing-library" ],
使用
eslint-plugin-testing-library 提供了很多规则，它们可以通过配置文件进行配置，以下是一些常用的规则：
prefer-explicit-assert
该规则用于检测使用隐式检查（contains、toBeInTheDocument、toBe）的断言是否存在问题。它鼓励在测试中使用显式的断言（e.g. expect(x).toEqual(y)）。使用显式的断言有助于提高测试的可读性及其可维护性。
示例代码：
-- -------------------- ---- ------- ---------- -- - ---- --- ------ - ------ -- -- - ----- - --------------- --------- - - ------------ ---- -------------------------------------- ------- - ------- - ------ ------ - --- ------------------------------------- ------- - ------- - ------ ----- - --- ----------------------------------------- - ------- - ------ ------------------- - --- ---------------------------- ---------------------------- --------------------------- --------------------------- ----------------------------------------------------------------- ----------------------------------------------- ---展开代码
no-await-sync-events
该规则用于检测在渲染之后立即触发的事件是否被同步地等待了。因为测试是异步执行的，如果等待的时机不对，测试将失败，从而导致测试质量下降。
示例代码：
-- -------------------- ---- ------- ---------- -- -- ----- --- ---- ---- ---- -- ----------- ----- -- -- - ----- - --------------- --------- - - ------------ ---- -------------------------------------- ------- - ------- - ------ ------ - --- ------------------------------------- ------- - ------- - ------ ----- - --- ----------------------------------------- - ------- - ------ ------------------- - --- ------------------------------------- ----- ---------- -- - --------------------------------------------------------------- -- - -------- ---- --- ---展开代码
no-unnecessary-act
该规则用于检测测试中是否存在不必要的 act 的调用，例如当向一个异步操作传入一个同步函数时。act 的目的是等待一些异步操作结束后再继续执行，所以我们需要保证传递给它的函数是异步的。
示例代码：
-- -------------------- ---- ------- ---------- -- --- ------- -- ----------- ----- -- -- - ----- - --------- - - ----------- ---- ------------------------------------------------- ----- --------- -- -- - ----- ---------- -- - ----------------------- ----------------------------- --- --- ---展开代码
结语
通过使用 eslint-plugin-testing-library，我们可以提高测试用例的可读性和可维护性，并避免了一些容易出错的场景。如果你还没有使用它，我强烈建议你尝试一下，相信你的测试代码质量会有大幅度的提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/eslint-plugin-testing-library
