简介
stylelint 是一款流行的 CSS 风格和错误检查工具，它帮助开发者避免在编写 CSS 时出现常见的错误和不规范的风格。stylelint-test-rule-ava 是一个基于 ava 测试框架的 npm 包，它可以用来测试自定义的 stylelint 规则，以确保规则的正确性。
本文将详细介绍如何使用 stylelint-test-rule-ava 进行规则测试，并提供示例代码。
安装
要使用 stylelint-test-rule-ava，首先需要安装它和其依赖的工具。可以使用 npm 命令进行安装：
npm i -D stylelint-test-rule-ava stylelint-processor-html ava
这里我们同时安装了 stylelint-processor-html 和 ava，前者是为了支持 HTML 文件中的 CSS 检查，后者是一个 JavaScript 单元测试工具。
创建测试文件
接下来，我们需要创建一个测试文件来编写测试用例。比如，我们创建一个名为 my-rule.test.js 的文件，内容如下：
-- -------------------- ---- -------
----- - ---- - - ---------------
----- - ------ - - -----------------------------------
------------- ------ ------ ----- --- -- -
----- ------ - ----- --------
----- -- - ------ ---- ---
--------- ----------
---
-------------------- -------
---
------------- ------ ------ ----- --- -- -
----- ------ - ----- --------
----- -- - ------- ----- ---
--------- ----------
---
-------------------- ------
--------------------------------------- ---
---------------------------------------- -----------
---在这个测试文件中，我们使用 test 函数来定义两个测试用例。每个测试用例都调用了 verify 函数来验证一个 CSS 片段是否符合规则。
verify 函数接受一个对象作为参数，该对象包含以下属性：
code：要验证的 CSS 代码片段。ruleName：要验证的规则名称。
verify 函数将返回一个包含验证结果的对象，其中包括 errored 属性和 results 属性。如果验证出错，则 errored 属性为 true，否则为 false。
编写自定义规则
为了演示如何编写自定义规则，我们创建一个名为 my-rule.js 的文件，内容如下：
-- -------------------- ---- -------
-------------- - -
------ -
---------- -------- -------- -- - -------- -- -
------ -------- ------ ------- -
--------------------- -- -
-- ---------- --- --------- -
----------------------- --- -- ---------------- -
----- -----
----- ---------
---
-
---
--
--
--
--在这个文件中，我们定义了一个名为 "my-rule" 的规则，该规则将检查 CSS 代码中是否出现了 "border" 属性。如果发现了该属性，则会发出警告。
运行测试
最后，我们可以运行测试以验证自定义规则是否正确。使用以下命令来运行测试：
npx ava my-rule.test.js
这个命令将启动 ava 测试运行器，并运行 my-rule.test.js 文件中的所有测试用例。
如果一切正常，你应该能够看到类似于下面的输出：
2 tests passed
如果测试失败，则输出将会提供详细信息，帮助你排除问题。
结论
在本文中，我们介绍了如何使用 stylelint-test-rule-ava 来测试自定义的 stylelint 规则。通过实际编写自定义规则并编写测试用例进行验证，可以更好地理
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56520