npm 包 html-looks-like 使用教程

在前端开发中，我们经常需要对 HTML 进行测试，以确保其正确性和一致性。而 html-looks-like 就是一个能够帮助我们做到这一点的 npm 包。它可以比对两段 HTML 代码，判断其是否相似或相同，从而能够快速方便地进行测试和 debug。

安装

你可以使用 npm 来安装 html-looks-like：

npm install html-looks-like --save-dev

使用

首先，我们需要引入 html-looks-like：

const htmlLooksLike = require('html-looks-like');

然后，我们就可以使用 htmlLooksLike() 函数来比对 HTML 代码了。该函数接受两个参数，分别为实际 HTML 代码和期望的 HTML 代码，例如：

const actual = '<div class="wrapper"><span>Hello World!</span></div>';
const expected = '<div class="wrapper"><span>Hello World!</span></div>';

htmlLooksLike(actual, expected); // true

这里，我们传入了两段相同的 HTML 代码，所以比对的结果为 true。接下来，我们来看一下两段不同的 HTML 代码该如何比对：

const actual = '<div class="wrapper"><span>Hello World!</span></div>';
const expected = '<div class="wrapper"><span>Hello JavaScript!</span></div>';

htmlLooksLike(actual, expected); // false

这里，两段 HTML 代码中的文字不同，所以比对的结果为 false。如果你想要更加详细的比对结果，你可以传入第三个参数，该参数为一个对象，可以包含以下属性：

• stripComments：是否忽略 HTML 中的注释，默认为 true。
• ignoreAttributes：是否忽略 HTML 中的属性，默认为 []。
• ignoreClassAttribute：是否忽略 HTML 中的 class 属性，默认为 false。

const actual = '<div class="wrapper"><span>Hello World!</span></div>';
const expected = '<div><span>Hello World!</span></div>';

const options = { stripComments: false };

htmlLooksLike(actual, expected, options); // false

这里，我们传入了第三个参数，忽略了实际 HTML 代码中的 class 属性，所以比对的结果为 false。如果你不确定如何传入这些参数，你可以查看官方文档，或者直接使用默认值进行比对。

案例

假如我们的应用程序中有一个名为 “Button” 的组件，我们可以使用 html-looks-like 来测试该组件是否具有正确的 HTML 结构，例如：

-- -------------------- ---- -------
----- ------ - ---------------------

---------------- ----------- -- -- -
  ---------- ------ --- ------- ------ -- -- -
    ----- ------ - -------- ----- ------ ---- ---
    ----- -------- - -------- -------------------- --------------

    --------------------- ---------- -- ----
  ---
---

这里，我们传入了一个对象作为参数，包含了 Button 组件将要渲染的内容。我们还定义了期望的 HTML 结构，并使用 html-looks-like 来比对实际 HTML 和期望 HTML 是否相同。如果这两者相同，测试就会通过，反之则失败。

总结

通过使用 html-looks-like，我们可以方便快捷地测试 HTML 代码，以确保其正确性和一致性。使用该 npm 包可以节省我们编写测试代码的时间和精力，同时还能提高测试的覆盖率和准确性。希望这篇文章能够对你有所帮助，谢谢阅读！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79448