前言
在前端开发中，逐像素还原测试是一个非常重要的环节。如果我们的页面出现了不必要的错位或者变形，就可能导致整个页面的效果大打折扣。为了保证页面能够完美还原设计稿，我们需要对逐像素还原测试有一个深刻的认识。
为了更好地进行逐像素还原测试，本文介绍了一种基于函数式组件实现的技术方案。这个方案的优点是简单易用，同时在保证还原度的前提下，还可以提高开发效率。因此，针对这个方案的攻略是非常有意义的。
步骤
1. 准备工作
首先，我们需要在 Next.js 项目中引入 react-test-renderer 这个包。在终端中执行以下命令即可：
--- ------- ---------- -------------------
react-test-renderer 提供了一系列的 API，可以用于对 React 组件做渲染和测试。
2. 编写测试代码
最基本的逐像素还原测试是对页面的各个区块进行截图对比。因此，我们需要先对页面进行渲染，并对各个区块进行截图。
我们可以通过以下代码来渲染页面：
------ ----- ---- --------
------ -------- ---- ----------------------
------ --- ---- ---------
--------- --------- ------ -------- -- -- -
----- --------- - ----------------
---- --
--
--- ---- - -------------------
-------------------------------
--这段代码中，我们首先引入 react-test-renderer 包，然后引入要测试的组件 App。在 test 中，我们将 App 组件渲染成一个 component 对象，并将其转化为 JSON 格式。最后，我们将这个 JSON 格式的对象与预设的快照进行对比。如果它们完全一致，测试就通过了。
但是，这样的测试过于简陋，只能对整个页面进行测试，没有办法对单个模块进行更细致的测试。
因此，我们可以将每一个模块都封装成一个函数式组件，并在测试中对每一个组件进行渲染和对比。
例如：
------ ----- ---- --------
------ -------- ---- ----------------------
------ ------ ---- ------------
------------ --------- ------ -------- -- -- -
----- --------- - ----------------
------- --
--
--- ---- - -------------------
-------------------------------
--这样一来，我们便可以对每个模块进行逐一测试，保证页面的还原度。
3. 使用快照测试
上面的代码中，我们使用了快照测试。快照测试是在一个测试运行时创建组件的文本呈现，然后将其与上次记录的快照进行比较。如果两者匹配，测试通过。
这种测试方法支持自动更新快照文件，可以保证快照文件和实际情况一致。当我们的代码发生更改，运行测试后，如果更改是正确的，那么快照文件也会自动更新。
4. 使用 withSnapshot HOC
为了进一步提高测试效率，我们可以将快照测试封装成一个高阶组件，使得其可以自动将快照保存到文件中，并自动进行对比。
我们可以编写一个 withSnapshot 函数，用于将我们要测试的组件包装起来，并将其渲染成快照进行对比：
------ -------- ---- ----------------------
----- ------------ - ----------- -- -
------------- ----------------------- -- --------------- ----------- -- -- -
----- --------- - -------------------------- ----
----- ---- - -------------------
-------------------------------
---
--
------ ------- -------------这样一来，我们就可以对每个组件都使用 withSnapshot 函数进行封装，然后直接调用封装好的组件进行测试了：
------ ----- ---- -------- ------ ------------ ---- ------------------ ------ ------ ---- ------------ ------ ------- ---------------------
5. 结合 Storybook
除了快照测试，我们还可以结合使用 Storybook 来进行逐像素还原测试。
Storybook 是一个 UI 开发环境，可以用于展示 React 组件的各种状态和用例。我们可以将每个组件都单独列出来，进行逐一测试。
使用 Storybook 进行逐像素还原测试有以下几个好处：
- 可以在各种不同的情况下测试组件，增加测试的全面性和准确性。
- 可以更清晰地展示组件的主要特点和用法，增加代码的可读性。
- 可以提高团队协作和代码复用度，各个组员都可以直接从 Storybook 中调用组件，避免了重复编写代码的情况。
在 Storybook 中进行测试，需要先引入 @storybook/react 包，然后编写 .storybook/config.js 文件。该文件可以配置 Storybook 中的各种参数，还可以引入组件进行展示。例如：
------ - --------- - ---- ------------------- ------ -------------- -- -------- ----------------------------------- ----- ------------------ --------
这里我们使用了 configure 函数，该函数会自动扫描 src 目录下的所有 .stories.js 文件，并注册 Storybook。我们只需要新建一个 .stories.js ，并在其中引入要测试的组件，就可以展示该组件了。
例如，我们可以在 Header.stories.js 中展示 Header 组件：
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - --------- - ---- -------------------------
------ ------ ---- -----------
------------------- ------- -- --------
------------------------ -- --------
--------------- -- -- - -- -------
------ --------- -- -- ------ --
--这段代码中，我们新建了一个 Header 组件，并将其注册到 Storybook 之中。我们可以添加一个 withKnobs 的参数面板，展示组件可以接受的各种参数。然后，我们为 Header 添加一个默认的情况，并在其中展示 Header 组件。
这样一来，我们就可以在 Storybook 中逐一测试组件，保证页面还原度。
结论
基于函数式组件实现的逐像素还原测试是一个十分有效的测试方法。它既可以保证代码的正确性和准确性，又可以提高开发效率和代码的可读性。我们可以结合使用快照测试和 Storybook 进行测试，从而保证整个页面的还原度。
如果你想让你的项目更加专业，值得推荐的是 Puppeteer 和 Jest-image-snapshot 等工具，它们可以提供更为全面和高效的图片比对能力，同样值得进一步探究。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670df1305f551281025f1ec4