社交媒体链接是现代网站和应用程序的重要组成部分。为了确保这些链接组件的可靠性和正确性，我们需要进行测试。在此文章中，我们将重点介绍如何使用 Enzyme 和 Sinon 进行测试。Enzyme 是 React 的常用测试工具套件，它能够让我们轻松地测试 React 组件。Sinon 则是 JavaScript 的 mocking 和 stubbing 工具，它能用于创建隔离测试环境和模拟函数调用。
什么是 Enzyme？
Enzyme 是一套 React 测试工具，它提供了一个直观的 API 来模拟 React UI 组件。Enzyme 囊括了 React 测试场景中的三个关键渲染方式：浅渲染、静态渲染和全渲染。这可以让我们在测试时很容易地检查组件的状态和属性。
什么是 Sinon？
Sinon 是针对 JavaScript 的 mock, stub 和 spy 库，它能够非常方便地模拟函数和完全控制测试中的函数调用。
使用 Enzyme 和 Sinon 进行社交媒体链接测试
在本文中，我们将使用 Enzyme 和 Sinon 来测试我们的社交媒体链接组件。假设我们要测试一个 SocialLink 组件，该组件接收一个 prop，指定其链接到的社交媒体平台。组件的代码如下：
------ ----- ---- --------
----- ---------- - -- -------- -- -- -
----- --- - ------------------------------
------ -
-- ---------- --------------- ------------- ------------
----------
----
--
--
------ ------- -----------现在让我们来编写测试用例。
测试 SocialLink 组件
首先，我们需要安装和导入 Enzyme 和 Sinon。我们可以使用以下命令：
--- ------- ---------- ------ -----
然后，我们可以在测试文件中导入它们：
------ - ------- - ---- --------- ------ ----- ---- -------- ------ ---------- ---- ---------------
在编写测试用例之前，我们需要了解 Enzyme 提供的三种不同的渲染方式：浅渲染(shallow rendering)、静态渲染(static rendering)和全渲染(mounting)。浅渲染只渲染组件本身，而不渲染其子组件；静态渲染则针对 React 16+ 版本，使我们能够渲染一个通常使用 ReactDOM.render 呈现的静态表示；全渲染则完全渲染组件及其子组件。
对于 SocialLink 组件，我们可以使用浅渲染(shallow rendering)，因为它只有一个链接和一些文本，不需要渲染任何子组件。我们可以编写以下测试用例：
---------------------- -- -- -
----------- --- ------- ----- -- -- -
----- ------- - ------------------- ------------------- ----
------------------------------------------------------------------------
---
---上面的测试用例使用了浅渲染，并期望链接渲染出的 URL 是正确的。
现在我们想测试，我们是否在所有链接打开时都设置了 rel=noopener noreferrer。 这是防止通过新窗口打开的链接导致的安全风险。为此，我们可以使用 Sinon 来模拟 <a> 标签上的 setAttribute，以确保正确设置 rel 属性。 我们可以编写以下测试用例：
---------------------- -- -- -
----------- --- ------- ----- -- -- -
----- ------- - ------------------- ------------------- ----
------------------------------------------------------------------------
---
-------- --- --------- -- --------- ----------- -- --------- -- -- -
----- --------------- - ------------
-- -- ------------
----------------------------- - -- -- --
------------- ---------------
---
----- ------- - ------------------- ------------------- ----
---------------------------------------- --------- -------------------------
---
---上面的测试用例使用了 Sinon 的模拟函数模拟了 document.createElement 方法中的 setAttribute 方法。这确保我们能够正确设置 rel 属性。
结论
在这篇文章中，我们学习了如何使用 Enzyme 和 Sinon 测试我们的社交媒体链接组件。我们先介绍了 Enzyme 和 Sinon 的背景和基本概念，然后展示了如何使用它们来编写测试用例。我们用浅渲染和 Sinon 来检查组件的状态和属性。通过这样的测试，我们可以确保我们的社交媒体链接组件能够正常运行，避免了未来出错的可能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673469770bc820c58248ecfb