在前端开发中，UI 组件开发是一个重要的部分。但是，开发一个良好的 UI 组件需要考虑很多因素，其中样式问题是一个关键的问题。在可视化组件开发中，为了保证组件的样式效果，我们需要不断进行样式文件的修改和测试。但是，这样的方式显然效率低下，而且容易出错。本文将介绍如何利用 Jest 的 snapshot 功能，来解决可视化 UI 组件开发过程中的样式问题。
Jest 简介
Jest 是 Facebook 公司推出的一个功能强大的 JavaScript 测试框架。它具有操作简单、集成完整、易于编写和调试的优点，使得前端开发过程中的测试变得更加容易和自动化。Jest 支持测试用例的自动并行运行、Mock API 的实现和断言的自动推断等特性，使得开发人员可以更加专注于测试用例本身的编写。
Jest 的 snapshot 功能
Jest 的 snapshot 功能是一个非常强大的功能，它可以帮助我们自动化完成可视化组件的测试。它可以捕获一个 JavaScript 对象的序列化形式，并将其保存为一个字符串，在下一次的测试中与预期结果进行比较。如果预期结果与实际结果不一致，则 Jest 会提示测试失败。
如何使用 Jest 的 snapshot 功能
在开始使用 Jest 的 snapshot 功能之前，我们需要先安装 Jest。可以使用 npm 或者 yarn 进行安装。
# 使用 npm 进行安装 npm install --save-dev jest # 使用 yarn 进行安装 yarn add --dev jest
安装完 Jest 后，我们需要在项目根目录下创建一个名为 __test__ 的文件夹，并在其中创建一个名为 *.test.js 的文件。例如：Button.test.js。（注意，文件名必须以 .test.js 结尾）
然后，在 Button.test.js 文件中，我们就可以使用 Jest 的 snapshot 功能进行测试。如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ -------- ---- ----------------------
------------ -------- -- -- -
----- --------- - ----------------
------- ---------- ----------- -- ------------- --
--
--- ---- - -------------------
-------------------------------
---上面的代码中，我们首先导入了 React 和 Button 组件。然后，我们引入了 Jest 的 renderer 模块，并使用 renderer.create 方法创建了一个组件实例。然后，我们将组件实例转换成 JSON 格式，并通过 toMatchSnapshot 方法保存快照。在下一次测试中，我们会用收到的结果和保存的快照进行比较，如果结果不一致，则测试失败。
示例
我们以一个简单的 Button 组件为例，来演示如何使用 Jest 的 snapshot 功能进行测试。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
----- --------------- - --------------
---------- -----
-------- --- -----
----------------- -----
------- --- ----- -----
-------------- ----
------- -
------- --------
----------------- -----
-
--
----- ------ - -- ----- ------- -- -- -
---------------- ------------------------------------------
--
------ ------- -------上面的 Button 组件随着鼠标的悬停，背景色会从白色变成灰色。
现在，我们可以在 Button.test.js 中使用 Jest 的 snapshot 功能进行测试。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ -------- ---- ----------------------
------------ -------- -- -- -
----- --------- - ----------------
------- ---------- ----------- -- ------------- --
--
--- ---- - -------------------
-------------------------------
---如果运行测试，将会看到类似下面的输出：
-- -------------------- ---- -------
---- -------- -----
- ------ ------
----------------------------------
-------- ---------- -- --- --------- ------ ------ ----
-------
-----------------------这个告诉我们测试失败了，因为我们修改了代码，但 Jest 没有更新快照。我们需要告诉 Jest，我们接受这样的修改，并将其更新到快照中。使用命令 npm test -- -u 或 yarn test -- -u 就可以自动更新快照。再次运行测试，就可以看到测试通过的结果。
总结
在可视化组件开发中，样式问题一直是令人头疼的问题。对于前端开发人员而言，手动测试组件的样式效果是一件枯燥而又难以避免的工作。但使用 Jest 的 snapshot 功能，我们可以将测试自动化，减少出错的可能性，并提高组件开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e9a12add4f0e0ff77bc78