前端开发是一个快速发展的领域，在开发的过程中我们会面临各种各样的问题和挑战。其中之一就是如何有效地测试我们的代码。在这个过程中，Enzyme 和 Jest 是两个开发者用来做单元测试的普遍选择。在本文中，我们将介绍如何使用 Enzyme 和 Jest 来测试你的 React 代码，并给出一些简单的示例和技巧。
Jest 基础知识
Jest 是一个非常流行的 JavaScript 测试框架。它具有易于使用的 API，而且速度非常快。在使用 Jest 进行测试之前，您需要安装 Jest：
--- ------- ---------- ----
安装好后，我们就可以开始编写测试代码了。
编写测试用例
我们现在假设我们需要测试一个函数，这个函数接受两个数字作为参数并返回它们的和。在撰写测试用例之前，我们需要先编写这个函数：
-------- ------ -- - ------ - - -- -
编写测试用例：
---------- - - - -- ----- --- -- -- - ------------- ------------ ---
这个测试用例可以这样解释：我们期望 add(1, 2) 的结果应该是 3。
我们的测试用例放在名为 tests 的文件夹内，并且可以通过运行以下命令来运行测试：
--- ----
这将会执行所有的测试用例。
快照测试
Jest 还支持可视化的快照测试。快照测试是一种测试方法，可以使您轻松地比较当前 UI 的状态和之前 UI 的状态。
在使用快照测试之前，我们需要先安装 Enzyme：
--- ------- ---------- ------ -----------------------
Enzyme 是一个流行的 React 测试工具，其 API 简单易用。
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------- -------- ------- ----------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- ---
在运行此测试用例后，Jest 将会生成一个快照文件。以后如果我们修改代码，通过运行快照测试，我们还能在控制台中看到我们对 UI 做出了哪些改变。
匹配器
在编写测试用例时，您可能会使用 Jest 的“匹配器” API 之一。匹配器是一种验证函数，它可以帮助您在测试过程中实现“期望”的结果。在 Jest 中，期望的结果通过 expect 函数来传递。
举一个简单的例子：
--------- ---- --- -- ------ -- -- - -------- - ----------- ---
toBe 就是一种基本的匹配器，它会检查两个变量是否完全相等。还有一些其他的匹配器，比如：
- toEqual: 用来检查两个对象的值是否相等
- toBeTruthy 和 toBeFalsy: 用来检查一个变量是否为 true 或 false
- toBeGreaterThan 和 toBeLessThan: 用来检查一个数值是否大于或小于另一个数值
您可以通过查看 Jest 文档来查看完整的匹配器列表。
Enzyme 入门
Enzyme 是一个流行的 React 测试工具，它可以帮助我们在测试中轻松地渲染组件。与 Jest 不同的是，Enzyme 是使用 React 测试工具提供的生命周期来实现的。在使用 Enzyme 之前，我们首先需要安装它：
--- ------- ---------- ------ -----------------------
渲染 React 组件
我们在这里使用 Enzyme 的 shallow 方法来渲染一个 React 组件。
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------- ------ -------- -- -- - ----- ------- - -------------------- ---- ------------------------------------ ---
在这个测试用例中，我们使用 shallow 方法来渲染 MyComponent 组件，并使用 exists 方法来检查组件是否存在。
模拟事件
Enzyme 也可以帮助我们模拟 DOM 事件，以便更好地测试 React 组件。
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------- ------ ---- --------- -- -- - ----- ----------- - ---------- ----- ------- - -------------------- --------------------- ---- ----------------------------------------- --------------------------------------- ---
这个测试用例中，我们首先在组件上添加了一个 onClick 事件监听器。然后，我们使用 simulate 方法来模拟 click 事件，并使用 toHaveBeenCalled 检查是否调用了 onClick 监听器。
测试组件状态和属性
Enzyme 还可以提供方法来帮助您搜索组件的 props 和 state，以便更好地测试：
------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ----------------- ------ ------ ------- -- -- - ----- ------- - ------------------ ---- ------------------ ------ - --- --------------------------------------- --- ----------------- ------ ---- ------- ------- -- -- - ----- ------- - ------------------ ---------------- ---- -------------------------------------------------- ---
在上述测试用例中，我们使用 mount 方法来渲染 MyComponent，并使用 setState 和 state 方法来测试 state。我们还使用 props 方法来测试组件的 props 状态。
结论
在本文中，我们介绍了 Enzyme 和 Jest，这两个工具都是 React 测试中的流行选择。我们已经学习了一些基本的测试技巧和用例，包括快照测试、匹配器和模拟事件。希望本文能够帮助您更好地测试 React 组件，并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670b1158d91dce0dc8871767