什么是 Jest 测试框架
Jest 是一个由 Facebook 提供的 JavaScript 测试框架，它特别适用于 React 应用的测试。Jest 提供了许多有用的特性，如自动运行测试用例，生成丰富的测试报告以及断言库等等。这些功能可以帮助我们写出高质量的、可维护的测试用例。
什么是快照测试
快照测试是一种基于比较现有输出与预生成的正确输出进行的测试方式。在 Jest 中，快照测试通过将输出与预期渲染结果直接比较来确保代码在多次运行之间没有变化。
快照测试的好处在于，它可以帮助我们大大减少手动测试的工作量，并且可以很容易地标识出代码中的变化。这可以确保我们的代码保持正确且一致。
Jest 中的快照测试
在 Jest 中，我们可以使用 toMatchInlineSnapshot 方法来生成快照测试。这种测试可以很容易地将输出与预期的结果对比，如果它们不匹配，Jest 将会向我们报告。
下面是一个简单示例：
--------------------- -- -- - ------------------------------------------------------------ -------------------------------------------------------------- ---
在第一次执行测试时，Jest 会生成一个快照，包含了我们的代码中的样式和组件，以及期望结果的 HTML 渲染。当我们再次运行测试时，Jest 会比较现有结果和之前生成的快照，如果两者作出的比较相同，则测试通过。如果它们不相同，我们将得到一个错误信息，提示我们代码可能出现问题。
在我们的测试代码中，我们可以使用 toMatchSnapshot 方法来生成快照，这将会把代码组件和样式的输出与预期输出进行比较。例如，在下面的示例中，我们测试了一个 React 组件，其中包含了可定制的按钮样式：
------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ----------- ------------ --------- ------ ----- ---------- -- -- - ----- ---- - ----------------------- --------------------- -------------------------- ------------------------------- ---
以上示例中，我们展示了一个 React 组件 Button，并对它的外观进行了自定义。我们首先通过 renderer.create() 方法构建的 React 组件渲染树，然后使用 toJSON() 方法将其输出为 JSON 对象，最后使用 toMatchSnapshot() 方法将其快照保存到磁盘上（我们使用此方法以便于我们在测试之间比较快照。）如果我们运行此测试，我们将会在控制台中看到以下输出：
--------------- --------- ------ ----- --- -------- --- - - ------- ----------------- ------ - ----- ------ --------- --
现在，我们的快照已经被创建了，并且将在我们之后的测试中被使用。如果我们在下次测试运行之间更改了代码中的样式，Jest 将会提示我们并要求更新我们的快照，以确保我们的测试结果正确。
styled-components 示例
styled-components 提供了一种 React 组件样式化的新方式，使用它我们可以封装组件，并同时定义组件样式。下面是我们如何在 Jest 中使用 styled-components 来进行快照测试的示例：
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- --------------------
------ ------ ---- -----------------
-------- ------- --------- ---- ------------------- -- -- -
----- ------ - --------------
----------------- -----
------ -----
--
----- ------- - ------------------- ----------------
------------------------------------------
---在上面的示例中，我们创建了一个简单的 Button 组件，通过 mount() 方法添加到 wrapper 变量中，并将之前的 expect() 语句替换为 toMatchSnapshot() 方法以生成快照。运行测试后，如果我们更改了代码的样式，我们可以在控制台中看到以下输出：
----------- ------- --------- ---- ----------------- --- - -
-----
-------
-------------------- ------
-
----- -----
---------
------
--由于我们已经提供了正确的输出，Jest 可以警告我们在渲染这个组件的过程中有任何变化发生。
在以上示例中，我们使用了 enzyme-to-json 库，将 React 组件转化为 JSON 对象。我们可以将其与 Jest 的快照测试方法一起使用以确保我们在测试中获取了最新的正确输出。
结论
使用 Jest 的快照测试，我们可以轻松地比较我们的 React 组件的输出结果，以及其内部的样式变化。这种测试方式可以很好地保证我们的组件的样式风格一致，并不断验证我们的代码是否正常运行。
对于 styled-components 来说，快照测试是一种很好的方式，可以确保组件的样式得到了正确渲染。我们鼓励开发人员在编写 React 组件和样式时使用 Jest 的快照测试方法，以确保我们的组件在所有情况下都可以正确渲染。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b0d3addd3a70eb6d179c2