前言
在软件开发过程中，测试是非常重要的一环。因为代码的正确性直接关系到用户的体验和系统的稳定性。而测试则可以帮我们发现和修复问题，确保代码的质量和可靠性。在 JavaScript 的前端开发领域，测试也是十分重要的一项工作。为了编写测试用例，我们需要一些工具和库来辅助我们。其中，提供快照测试的工具非常简便和高效，而其中一个可选择的工具是 npm 包 unexpected-snapshot 。
unexpected-snapshot 是一个基于 assert 模块的、支持快照测试的断言库。它提供了不少有用的特性，可以帮助我们编写简单而又高效的测试用例。本文将介绍 unexpected-snapshot 的用法和示例，以及它如何帮助我们编写更简单和高效的测试用例。
安装和使用
为了使用 unexpected-snapshot ，我们需要先安装它到我们的项目中。我们可以使用 npm 包管理工具来安装：
npm install unexpected unexpected-snapshot --save-dev
unexpected-snapshot 需要配合 unexpected 一起使用，所以我们需要一起安装它们。接下来，在测试文件中引入 unexpected 和 unexpected-snapshot ：
const expect = require('unexpected');
const unexpectedSnapshot = require('unexpected-snapshot');
expect.use(unexpectedSnapshot);接着，我们就可以使用 expect 断言语法来完成测试了。using() 方法告诉 expect 使用 unexpectedSnapshot 插件。我们将它添加到 expect 实例上，就可以愉快地享受快照测试了。
使用场景
快照测试通常被用于比较 DOM 的结构和输出，如 HTML、SVG、Canvas 元素等。想象一下，在我们编写复杂的组件时，我们需要检查组件产生的 HTML 是否符合预期。这种场景下，我们可以使用快照测试，对比组件渲染出来的 HTML 和预期的 HTML 是否一致。
基本用法
unexpected-snapshot 提供了 toMatchSnapshot 和 addSnapshotSerializer 两个方法。下面简单介绍一下它们的用法。
toMatchSnapshot
toMatchSnapshot 方法是快照测试的关键。它的作用是比较测试结果与预期是否匹配。执行 toMatchSnapshot 方法的同时，如果没有预期的快照，则会生成一个新的快照。如果已经存在预期的快照，则会将测试结果与预期的快照进行比较。如果测试结果和预期快照不符，则测试用例失败。
-- -------------------- ---- -------
----------- --- ---------- -------- -- -
----- -------- - -
-- --
-- -
-- -
-
--
---------------- --- ----- -----------
---该测试用例将匹配 myObject 的快照。如果测试运行成功，它将生成一个名为“test matches the snapshot.snapshot”的文件，其中包含了 myObject 的快照。这个快照文件将用作下次执行测试时的预期值。
如果我们对 myObject 进行了更改，那么测试用例就会失败：
-- -------------------- ---- -------
----------- --- ---------- -------- -- -
----- -------- - -
-- -- -- ------------
-- -
-- -
-
--
---------------- --- ----- -----------
---在这种情况下，我们将得到类似于以下的错误消息：
-- -------------------- ---- -------
--------------
-------- - -- -- -- - -- - - - -- ----- --------
-------- ---------
-
---- -- -- ---- - --- --------- - --- ---
---- -
---- -
-
-
-- -------------- -----------------------
---我们可以看到，测试失败了，并且输出了一个错误消息。在这个错误消息中，我们可以看到预期的快照与实际的测试结果之间的差异。这使得我们能够快速地发现问题，然后进行修复。
addSnapshotSerializer
有时候，预期值的格式和实际测试结果的格式是不同的。在这种情况下，我们需要自定义一个序列化器来将实际结果转换为预期值的格式。为此，unexpected-snapshot 提供了 addSnapshotSerializer 方法：
const { addSnapshotSerializer } = require('unexpected-snapshot');
addSnapshotSerializer(obj => {
// ...
return {
representedProperties: ['expected', 'actual']
};
});默认情况下，addSnapshotSerializer 将返回 undefined 。所以我们需要根据实际情况来编写适当的序列化器。
addSnapshotSerializer 方法接受一个序列化器函数。序列化器函数接受测试结果作为入参，并返回序列化后的数据。序列化后的数据将写入到快照文件中。
在上面的示例中，addSnapshotSerializer 的序列化器函数接受一个 obj 参数，并返回一个 representedProperties 属性。representedProperties 的值是一个数组，表示了哪些成员应该被写入到快照文件中。
同时，这个序列化器定义了一个新的快照格式。我们可以使用此新的格式来测试其他的应用程序。
示例代码
为了更好地理解 unexpected-snapshot 的用法，下面列举两个示例代码：
-- -------------------- ---- -------
----- - ------ - - ----------------
----- - ------------ - - ------------------
----- - ---------- --------------- - - ----------------------
----- ------------------ - -------------------------------
-----------
-------------- ----------
------------------ ----------------
---
----------------------------
-------------------------------
-------------- ------ - ------ -- - -------- -- -- -
--- -------
--- --------
------------- -- -
------ - ----------------- -----
------- - ------------------------
--------------- --- --- -- - - -------- ------
----------------- - ------
---------------
---
----------- --- ---------- -- -- -
-------------- --- ----- -----------
---
---这是一个使用 unexpected-snapshot 来测试 Canvas 元素生成的新快照。
-- -------------------- ---- -------
----- - ------ - - ----------------
----- - ---------- --------------- - - ----------------------
----- ------------------ - -------------------------------
-----------
-------------- ----------
------------------ ----------------
---
----------------------------
-------------------------------
---------------------- -- -- -
--- -----------
------------- -- -
---------- - --- -------------
---
-------------- ------ --- --------- -- -- -
----------- --- ---------- -- -- -
------------------------ --- --- ----- -----------
---
---
-------------- ----------- --- --------- -- -- -
----------- --- ---------- -- -- -
----------------------------- --- --- ----- -----------
---
---
-------------- -------- --- --------- -- -- -
----------- --- ---------- -- -- -
---------------------------- --- --- ----- -----------
---
---
---这个是使用 unexpected-snapshot 来测试计算器应用程序的新快照。
总结
本文介绍了 npm 包 unexpected-snapshot 的用法和示例。我们可以看到，unexpected-snapshot 提供了实现快照测试的关键方法 toMatchSnapshot 和 addSnapshotSerializer 。我们可以使用它们来检查实际测试结果是否与预期结果相符。该快照测试库由 assert 模块构建，易于使用和配置。它的快照测试用例通常用于测试 DOM 结构和其它可序列化对象的输出。在这种情况下，快照测试可以提供一个快速、简单和可靠的方法，以确保应用程序的正确性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc061b5cbfe1ea0611c8e