在今天的前端开发中，测试是重要的一环。虽然可以选择使用不同的测试库，但在社区中，Jest 和 Enzyme 是最受欢迎的 React 测试工具。（注意：Jest 是 JavaScript 测试框架，Enzyme 是 React 测试工具，需要用 Jest 或其他 JavaScript 测试框架配合使用）。在本文中，我们将探讨如何使用 Jest 和 Enzyme 测试 React 组件。
安装 Jest 和 Enzyme
在开始测试之前，需要先安装 Jest 和 Enzyme。可以使用 npm 或 yarn 进行安装：
--- ------- ---------- ---- ------ ----------------------- -----------------------
或
---- --- ----- ---- ------ ----------------------- -----------------------
还需要一个名为 enzyme-to-json 的库来序列化 Enzyme 渲染器的输出。可以通过以下命令进行安装：
--- ------- ---------- --------------
或
---- --- ----- --------------
编写测试
现在，我们可以使用 Jest 和 Enzyme 编写测试了。下面是一个使用 Enzyme 和 Jest 测试组件的示例。我们假设有一个组件名为 Button：
------ ----- ---- -------- ----- ------ - -- --------- ------- -- -- - ------- ------------------------------------- -- ------ ------- -------
现在，我们需要测试这个组件的渲染以及按钮是否被点击。首先，我们要创建一个名为 __tests__ 的文件夹，然后在里面创建一个名为 Button.test.js 的文件。
在单元测试文件中，我们首先需要导入需要测试的组件以及 Enzyme 和 enzyme-to-json 库：
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------------- ------ ------ ---- ------------
接下来，我们可以编写测试用例。在 Jest 中，可以使用 describe 和 it 来编写测试用例：
---------------- ----------- -- -- -
----------- ----------- -- -- -
----- ------- - --------------- ----------- -- -----------------
------------------------------------------
---
------------ ------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- -------------------------------
--------------------------
-----------------------------------------
---
---在这个测试用例中，我们首先测试组件的截图是否匹配我们的预期。我们使用 shallow 函数来创建 Enzyme 渲染器，这个函数会返回一个包含渲染出的 React 组件的浅渲染器。然后，我们使用 toJson 函数来序列化渲染器的输出，我们可以使用 toMatchSnapshot 函数来比较渲染器的输出和之前生成的快照。如果两者不匹配，则测试将失败。
接下来，我们测试按钮是否被正确地点击。在这个测试用例中，我们使用 jest.fn 来模拟 onClick 函数，并使用 simulate 函数来模拟按钮的点击。最后，我们使用 toHaveBeenCalledTimes 函数来检查 onClick 函数是否正确地被调用。如果函数被调用一次，则测试通过，否则测试将失败。
结论
在本文中，我们探讨了如何使用 Enzyme 和 Jest 测试 React 组件，以及如何编写测试用例来测试组件的渲染以及交互行为。如果你要开始编写测试，这篇文章应该会提供一个好的初始指导。记住，在编写测试时，要注意代码的可读性和可维护性，这将有助于保证测试代码的有效性和可靠性！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fb0a8b4471362601552f56