什么是 Jest？
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，用于编写可靠、可重复、可维护的测试。它具有易于使用、快速、自动化快照测试等特性，让测试变得更加简单。
什么是 Snapshot？
当我们测试一些常量的行为时，可以用 Jest 中的快照来测试。快照可以拉取测试结果，并将其保存为文件。下一次测试时，Jest 会将新结果与先前的快照进行比较。如果结果已经更改，则会发生警告，并且可以决定是否接受更改。
为什么要使用 Snapshot？
使用快照测试可以减少手动创建测试的必要性，同时确保每次测试结果的一致性。一旦你确信你的快照是正确的，你就可以更改代码并确保保留该行为。使用快照测试也可以显著简化开发过程，因为您会知道什么会受到更改、什么不会受到更改。
在 Jest 中如何使用 Snapshot？
在我们的测试文件中，使用 Jest 中的 toMatchSnapshot() 函数，如下所示：
test('测试 Hello World 应该渲染为 "Hello World!"', () => {
const helloWorld = shallow(<HelloWorld />);
expect(helloWorld).toMatchSnapshot();
});将测试运行时，Jest 会在您的项目中的 __snapshot__ 目录下创建新的快照目录。在运行后，可以随时检查您当前创建的快照是否正确。如果快照正确，Jest 将输出 PASS，否则将输出 FAIL。如果您接受更改，可以手动更新快照，该快照将更新并分配您的测试。
Jest Snapshot 实践
下面我们以一个 React 组件为例进行 Snapshot 实践。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ ------- --------------- -
-------- -
------ -
-------
--------------------------------
----------------------------
------------------------------
-
---------------------
---------
--
-
-
------ ------- -------我们首先需要创建一个测试文件来测试 Button 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ -------- ---- ----------------------
---------------- -- -- -
----- --------- - ----------------
------- ----------------------- ----------------
-----
----------
--
--- ---- - -------------------
-------------------------------
---在上面的代码中，我们将 Button 组件的渲染结果与快照进行比较。如果渲染结果与快照相同，则测试通过，否则失败。运行测试后，Jest 会在 __snapshot__ 目录下创建一个文件夹，其中包含 Button.test.js.snap 快照文件。
我们修改组件的部分样式，再次运行测试，测试将失败，因为快照已经过期。我们可以接受更改并更新快照，或者在我们确认该更改是故意的情况下，我们也可以用 -u 运行 Jest 来更新快照。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ -------- ---- ----------------------
---------------- -- -- -
----- --------- - ----------------
------- ----------------------- -----------------
-----
----------
--
--- ---- - -------------------
-------------------------------
---在上面的代码中，我们更新了组件的 className 和 disabled 属性，并修改了快照。再次运行测试，我们可以看到测试通过。
总结
使用 Jest Snapshot 的快照测试是一种简单而有效的测试方法。使用 Jest 中的 toMatchSnapshot() 函数，可以轻松创建快照测试并确保测试的可靠性。建议将 Snapshot 测试作为测试策略的一部分来使用，尤其是针对一些常量的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0e4a348841e9894d1a7d5