前端领域有许多优秀的 npm 包可以帮助我们更好地开发应用程序， unexpected-htmllike-jsx-adapter 就是其中一种。它是一个适配器，将 Jest 的 expect API 与 unexpected 框架结合起来，特别适用于处理 JSX 组件的测试，本文将带你深入了解如何使用这个 npm 包进行前端测试。
安装
在开始之前，你需要先安装好以下依赖：
- Node.js
- Jest
- unexpected
- unexpected-htmllike
- unexpected-htmllike-jsx-adapter
如果还没有安装，可以通过以下命令进行安装：
npm install --save-dev jest npm install --save-dev unexpected unexpected-htmllike unexpected-htmllike-jsx-adapter
开始测试
下面我们将通过一个示例代码来演示如何使用 unexpected-htmllike-jsx-adapter 进行测试。
-- -------------------- ---- -------
------ - ------ - ---- -------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ ----------- -- -- -
----- ------- - --------------- ----
--------------- --- ---- ---------- ------------- --------------
---
---------- ---- ------- ------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
--------------------------
--------------- --- ---- ---- ---------
---
---在上面的示例代码中，我们使用 Jest 及 Enzyme 测试模拟一个简单的 Button 组件。其中测试我们需要先导入 expect 和 shallow 函数，expect 函数对应的是 unexpected 的断言方法，而 shallow 函数对应的是 Enzyme 让我们可以只渲染组件的浅层渲染方法。
在第一个测试中，我们希望测试组件是否正确地被渲染。我们将渲染的组件与期望的组件进行比较，如果一致则测试通过。在这里我们使用了 unexpected-htmllike-jsx-adapter 包来适配组件的比较，'to have rendered' 是 unexpected-htmllike-jsx-adapter 包中提供的断言方法，它能够让我们使用 JSX 组件进行比较，并且不需要手动进行组件的序列化和解析。
在第二个测试中，我们测试点击事件是否被触发。我们使用了 Jest 的 mock 模拟一个函数并将其传入组件中。然后我们通过 Enzyme 的 simulate 方法触发一次点击事件，之后再用 expect 函数进行测试，如果被触发则测试通过。
断言方法
除了上面的 'to have rendered' 方法之外，unexpected-htmllike-jsx-adapter 中还有许多可用的断言方法，包括：
- to have tag
- to have attribute
- to contain children
- to have style
- 等等
这些方法可以满足各种不同的测试需求，例如检查组件是否包含某个标记，该标记是否具有特定的样式或属性，以及组件是否包含子组件等。
总结
本文主要介绍了如何使用 unexpected-htmllike-jsx-adapter 进行前端测试，希望对初学者或正在了解这个库的人有所帮助。我们通过一个示例代码演示了如何使用它进行测试，同时介绍了该库中提供的一些常用的断言方法。如果你想更深入地了解该库，可以去它的文档中了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61296