npm 包 snapshot-diff 使用教程

介绍

snapshot-diff 是一个用于比较 Jest/Snapshot 格式快照之间差异的 JavaScript 库，它是一个轻量、易于使用且可定制化的工具。

snapshot-diff 可以在您进行测试时轻松地查看发生了哪些改变，从而轻松地了解快照之间的区别，十分适用于需要频繁更新快照的项目。

安装

在使用 snapshot-diff 之前，我们需要先进行安装：

npm install snapshot-diff

或

yarn add snapshot-diff

示例

假设现在我们有一个函数，如下所示：

function add(a, b) {
  return a + b;
}

我们使用 Jest 的快照测试机制来测试这个函数：

test('add', () => {
  expect(add(1, 1)).toMatchSnapshot();
  expect(add(-1, -1)).toMatchSnapshot();
  expect(add(-2, 2)).toMatchSnapshot();
});

在第一次运行之后，我们会得到一个包含所有快照的目录。现在，我们更新了代码并再次运行测试，我们可以使用 snapshot-diff 来查看新产生的差异：

-- -------------------- ---- -------
------ - ------------------- - ---- ----------------

--------------- ------------------- ---

----------- -- -- -
  ------------- --------------------------
  -------------- ---------------------------
  -------------- --------------------------
---
展开代码

现在，我们只需要运行 jest 测试命令，并且会在终端上看到差异：

-- -------------------- ---- -------
- --------
- --------

  ---

-------- -----
- --- -- -----

-------- -----
- --- -- -----

-------- -----
- --- -- -----
展开代码

toMatchDiffSnapshot 函数会将预期值和实际值传递给 snapshot-diff 函数，以便对两个快照进行比较。如果两个快照之间没有任何差异，测试将会成功。如果存在差异，snapshot-diff 将会把差异输出到控制台，这样我们就可以轻松地看到两个快照之间的差异，并且使用 console.log 来进行调试。

深入使用

您还可以对 snapshot-diff 进行更多的高级配置，以适应您的具体需求。

配置选项

我们可以在调用 toMatchDiffSnapshot 时传入下列配置选项：

• expand: 是否展开差异，默认为 false
• colors: 是否使用颜色显示差异，默认为 true
• contextLines: 在输出中附加上下文行数，默认为 5
• aAnnotation: 用于标注快照之一的注释，默认为 Expected
• bAnnotation: 用于标注快照之一的注释，默认为 Received
• aColor: 用于标注快照之一的颜色，默认为 green
• bColor: 用于标注快照之一的颜色，默认为 red
• changeColor: 用于新值的颜色，默认为 yellow

-- -------------------- ---- -------
---------- ------ ------------ -- -- -
  ----- ----- - -
    -- --
    -- -
      -- --
      -- -
        -- ------
        -- ----- --------
        -- -- -- ----- ----- ------- -- - -- -------- ---
      --
    --
  --

  -----------------------------------
    ------- -----
  ---
---
展开代码

此时在终端上将会得到一个展开的快照差异报告。

格式化器

snapshot-diff 还允许您使用自定义格式化程序来比较和输出任何格式的数据。matcher 格式化器是一个将快照值和实际值传递给自定义渲染器函数的函数，您可以对其进行更改以适应您的具体需求。例如：

-- -------------------- ---- -------
------ - ------------------- - ---- ----------------
------ - ------ - ---- -----------

----- ---------------------- - -
  ----- ------- -- ----- ---------- -----
  ------ ------- -- ------------- ----------- -----------
--

-----------------------------------------------------

--------------- ------------------- ---

------------ -------- ------------ -- -- -
  ---------- --------------------------------------------------------
---
展开代码

在这种情况下，我们将 Date 格式化成更人性化的日期格式。

总结

snapshot-diff 是一个方便、易于使用且可定制化的 JavaScript 库，它能够帮助我们比较 Jest/Snapshot 格式快照之间的差异。通过了解如何使用 snapshot-diff，您可以更轻松地了解和测试您的软件项目，同时避免在更新快照时浪费时间和精力。

参考

• Snapshot testing
• Compare Jest/Snapshot format snapshots using jest-snapshot-diff
• snapshot-diff documentation

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70764