在 React 应用程序开发中，测试是非常重要的一部分。通过测试，我们可以确保我们的组件是正确的，正确性可以被重复检查，这有助于减少代码中的错误，并且可以加速开发流程。Enzyme 是一个非常流行的测试工具，它提供了一些帮助我们测试 React 组件的强大功能。在本文中，我们将讲解如何使用 Enzyme 进行 React 组件测试，并提供一些实践意义的例子。
什么是Enzyme？
Enzyme 是由 Airbnb 开发的 React 组件测试工具。它为开发人员提供了一个强大的 API，用于测试组件的 UI、状态和行为。它主要是一个测试库，用于模拟 React 组件的行为。
Enzyme 提供了三种渲染类型：浅渲染(shallow)，静态渲染(static)，完全渲染(mount)。通过这些不同的渲染类型，我们可以测试 React 组件在不同场景下的渲染方式，验证组件是否正常工作。
安装Enzyme
首先，我们需要安装 Enzyme。可以通过 npm 进行安装：
npm install --save-dev enzyme
注意：如果你使用的是 React 16.13.1 及以前的版本，请同时安装 Enzyme Adapter：
npm install --save-dev enzyme-adapter-react-16
然后，在配置文件中添加以下内容：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });Enzyme 的API
Enzyme 提供了一些强大的 API，可以帮助我们测试 React 组件。在这里，我们将介绍最常用的一些 API。
shallow
shallow 方法用于浅渲染组件，它只渲染组件的一个级别。它返回的是一个shallowWrapper对象，它允许我们查找渲染组件的元素及其属性。
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent />);mount
mount 方法用于完全渲染组件，它渲染组件的所有子元素。它返回的是一个mountWrapper对象，它允许我们查找渲染组件的元素及其属性。
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);static
static 方法用于静态渲染组件，它返回的是一个 React 元素对象。它不允许我们查找渲染组件的元素及其属性，但它对于测试 React 组件的 defaultProps 很有用。
import { render } from 'enzyme';
const element = render(<MyComponent />);find
find 方法用于查找匹配的元素，它接收一个选择器作为参数。
wrapper.find('.my-class');prop
prop 方法用于获取渲染组件的属性。
wrapper.prop('name');setState
setState 方法用于设置组件的 state。
wrapper.setState({name: 'new name'});simulate
simulate 方法用于模拟事件，接收事件类型及其属性作为参数。
wrapper.find('button').simulate('click', { button: 1 });实际应用
让我们通过一些实际的例子来演示如何测试 React 组件。
测试组件属性
让我们假设我们有一个简单的 MyComponent，它接收一个 name 属性并在页面上显示它。
function MyComponent(props) {
return (
<div>
<h1>Hello, {props.name}</h1>
</div>
);
}如何使用 Enzyme 测试组件属性？我们将使用 shallow 方法，首先检查是否能够正确地渲染我们的组件，然后使用 props 方法检查组件是否设置了正确的属性。
-- -------------------- ---- -------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- -------- ------ --- ---- ------ -- -- -
----- ------- - -------------------- ----------- ----
------------------------------------------------- -------
---------------------------------------------
---
---测试组件状态
让我们假设我们有一个简单的 MyComponent，它有一个按钮，单击它时将在状态中设置一个值。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
---------- -----------------------
------- ----------------------------------- --------------
------
--
-
-如何使用 Enzyme 测试组件状态？我们将使用 simulate 方法模拟单击事件，然后使用 prop 方法检查组件的状态是否正确更改。
-- -------------------- ---- -------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- -------- --- ----- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------- ----
-----------------------------------------
------------------------------------------
------------------------------------------------- ----
---
---测试组件交互
让我们假设我们有一个简单的 MyComponent，它有两个输入框和一个按钮，单击按钮时将组合输入框中的值。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ---
--------- ---
--------- ---
--
-------------------------- - --------------------------------------
------------------------- - -------------------------------------
--------------------------- - ---------------------------------------
-
---------------------------- -
--------------- ---------- ------------------ ---
-
--------------------------- -
--------------- --------- ------------------ ---
-
------------------------ -
----- -------- - ------------------------ ------------------------
--------------- -------- ---
-
-------- -
------ -
-----
-----
------------ ----- --------
------ ----------- ---------------------------- ------------------------------------- --
------
-----
----------- ----- --------
------ ----------- --------------------------- ------------------------------------ --
------
------- --------------------------------------------- -------------
-----
----------- ----- --------
----------------------------------
------
------
--
-
-如何使用 Enzyme 测试组件交互？我们将使用 simulate 方法模拟在输入框中输入值，然后模拟点击按钮，最后使用 state 和 toHaveLength 方法检查组件是否正确交互。
-- -------------------- ---- -------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- ------- --- ----- ---- --- ---- ---- ---- --- ------ -- --------- -- -- -
----- ------- - -------------------- ----
----------------------------------------------------------- - ------- - ------ ------ - ---
----------------------------------------------------------- - ------- - ------ ----- - ---
-----------------------------------------
----------------------------------------------- ------
---------------------------------------------
------------------------------------------------- ------
---
---结论
Enzyme 是一个非常强大的测试工具，它提供了多种渲染类型和强大的 API，帮助开发人员测试 React 组件。在本文中，我们介绍了 Enzyme 的安装和基本用法，并演示了如何使用它进行 React 组件测试的实际应用。这些例子可以帮助你更好地了解如何使用 Enzyme。当你开始测试你的 React 应用程序时，Enzyme 可以成为你的强大盟友。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67341c1a0bc820c582469de3
