React 是一种流行的 JavaScript 库，用于构建用户界面。Enzyme 是 React 应用程序测试的一种工具，它提供了一组断言，用于测试 React 组件的行为和输出。本文将介绍如何使用 Enzyme 进行 React 应用程序测试，并讨论哪些断言可用于测试。
安装 Enzyme
首先，需要安装 Enzyme。可以使用以下命令安装：
npm install --save-dev enzyme enzyme-adapter-react-16
在安装后，需要在测试文件中导入 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试 React 组件
在测试 React 组件之前，需要了解几个概念：
- 浅渲染：仅渲染组件的一层，不渲染子组件。
- 完全渲染：渲染组件及其子组件。
- 模拟事件：模拟用户与组件交互的事件。
浅渲染
浅渲染用于测试组件的输出，但不渲染其子组件。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在上面的示例中，我们使用 shallow 函数来浅渲染 MyComponent 组件。然后，使用 Jest 的 toMatchSnapshot 函数来测试组件的输出是否与预期相同。
完全渲染
完全渲染用于测试组件及其子组件的输出。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---在上面的示例中，我们使用 mount 函数来完全渲染 MyComponent 组件及其子组件。然后，使用 Jest 的 toMatchSnapshot 函数来测试组件的输出是否与预期相同。
模拟事件
模拟事件用于测试组件对用户交互的响应。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- ----------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---在上面的示例中，我们使用 simulate 函数来模拟按钮的点击事件。然后，使用 Jest 的 toHaveBeenCalled 函数来测试 handleClick 函数是否被调用。
断言
Enzyme 提供了一组断言，用于测试 React 组件的行为和输出。以下是一些常用的断言：
exists()：检查组件是否存在。toBe()：检查组件的值是否等于预期值。toHaveProp()：检查组件是否具有指定的属性。toHaveState()：检查组件是否具有指定的状态。toHaveLength()：检查组件的长度是否等于预期值。toMatchSnapshot()：检查组件的输出是否与预期相同。
结论
在本文中，我们介绍了如何使用 Enzyme 进行 React 应用程序测试，并讨论了哪些断言可用于测试。使用 Enzyme，我们可以轻松地测试 React 组件的行为和输出，从而确保我们的应用程序的质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675aabf64b9d41201aba6c55