Enzyme 是 React 测试工具中最常用的测试工具之一，它可以让我们更加方便地测试 React 组件的各种状态和行为。而在使用 Enzyme 进行单元测试时，需要结合 Jest 进行断言的编写，以确保我们的应用程序代码符合预期的行为。
然而，在测试应用程序中使用 Enzyme + Jest 断言的过程中，我们可能会遇到一些性能和维护方面的问题。在本文中，我们将介绍如何优化 Enzyme + Jest 断言，以便更加高效的进行测试。
优化断言的数量
在编写测试时，我们应该尽量避免出现过多的断言。当测试用例中包含太多的断言时，我们的测试用例可能会变得难以维护和理解。因此，我们应该尽可能地将多个关联的断言组合在一起。
比如下面的示例代码：
------------ ------ --- --------- ---- --- ------- ------- -- -- - ----- ------- - -------------------- ----------- -------- ---- -------------------------------------------------------------- ----------------------------------------------------------- ---
这里有两个断言，它们的目的是确保 MyComponent 组件渲染了正确的 name 和 age 属性。但是我们可以将它们组合成一个单一的断言：
------------ ------ --- --------- ---- --- ------- ------- -- -- -
----- ------- - -------------------- ----------- -------- ----
--------------------------------------------------------------
-----------------------------------------------------------
--------------------------------------------
---- ----------------------------
---- -------------------------
-----------------
---这个断言使用 containsAllMatchingElements 函数，对含有 .name 和 .age 类型的标签进行了比较。调用这个函数的结果是一个布尔值(true or false)，表示是否找到了所有的匹配项。
这样做的好处是明显的：它们使得代码更加容易理解，因为将两个断言组合在一起会使代码更加简洁，同时也通常可以提高测试的可读性和可维护性，使我们在需要更改测试用例时更加容易找到并修改断言。
使用 Jest 的 beforeEach 和 afterEach
Enzyme 测试高效有效的抓取DOM节点，但是这却也使得 Enzyme 开销巨大。在每次运行 wrapper 函数之前和之后都会创建和卸载组件。这样的操作会浪费大量时间和资源。一些场景下，我们可以使用 beforeEach 和 afterEach 在测试用例套件的每个测试运行前或后对 wrapper 对象进行初始化与清理。
比如下面的示例代码可以通过使用 beforeEach 函数来避免创建多个临时组件实例：
--- -------- ------------- -- - ------- - -------------------- ---- --- ------------ -- - ------------------ --- ------------ ------ --- ----------- -- -- - ------------------------------------------------------------ --- ------------ ------ --- --------- ---- --- ------- ----- ------ -- -- - ---------------------------------------------------------- ---
这段代码使用了 beforeEach 和 afterEach 函数，对相同的 wrapper 对象进行初始化和清理。尽管 MyComponent 组件的渲染只需花费很短时间，但在测试套件中使用此初始和卸载代码却可以为我们的测试执行提供很大帮助。
使用 toMatchSnapshot 函数
使用 Enzyme 进行快照测试的推荐方法是使用 toMatchSnapshot 函数。这个函数会将组件转化为 JSON 形式，然后将其处理掉使用于创建字符串的特殊字符。 toMatchSnapshot 函数通常与 create 函数配合使用，可以帮助我们更快地进行快照测试。如果 JSON 输出与参考快照不一致，它会引发错误。 toMatchSnapshot 函数会自动创建快照并将其与在磁盘上已有的快照进行比较。
在 Jest 中，只需完成以下两项操作即可使用 toMatchSnapshot 函数：
- 使用
import { create } from 'react-test-renderer'导入create函数。 - 将
wrapper传递给create函数。
这是一个示例：
------------ ----- --- ---------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- ---
toMatchSnapshot 函数可以通过传递一些参数来自定义我们输出格式，例如：
--------------------------------- ------------- ------- -- -- ---- -- ---------------- ----- -- ----- -------- --------- ----- -- ---- ---
结论
本文介绍了如何在 Enzyme + Jest 断言中优化性能和减少测试用例编写时出现的问题。这些优化方案固然不是必须的，但它们可以使我们写出更加稳定高效的测试用例，同时使得维护测试用例更加容易。
不论你是刚刚入门前端开发，还是经验丰富的开发人员，掌握这些技巧都是非常有帮助的。通过这些优化方案，您可以更轻松地编写和维护高质量的应用程序测试，从而确保您的应用程序具有更高的可靠性和更佳的可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ffaed71b0bf82c71ce3eea