React 是当前前端开发领域最为流行的技术之一，而 Enzyme 则是 React 应用的常用测试工具之一。Enzyme 提供了一系列 API，可以方便地模拟 React 组件的渲染、交互等行为，以此来测试 React 应用的各个方面是否符合要求。本文将介绍 Enzyme 的基本用法以及测试 React 应用的最佳实践。
安装
在使用 Enzyme 前，需要先安装该工具。安装 Enzyme 可以使用 npm 或者 yarn，具体命令如下：
npm install --save-dev enzyme enzyme-adapter-react-xx
其中，xx 代表你使用的 React 版本。如果使用的是 React 16，那么 xx 就为“16”。如果使用的是 React 17，则需要额外安装 enzyme-adapter-react-17。
基本用法
了解了 Enzyme 的安装过程后，我们来看一下该工具的基本用法。首先，需要在测试文件中引入 Enzyme：
import { shallow, render, mount } from 'enzyme';其中，shallow 用于渲染一个组件，但不会渲染该组件的子组件；render 用于渲染一个组件，并返回一个静态的 HTML 字符串；mount 用于完整地渲染一个组件及其子组件。
下面，我们以一个简单的 React 组件为例，来演示 Enzyme 的基本用法。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
------------- -
----------------------- -- --
------ --------------- - -
----
-
-------- -
------ -
-----
------ --------------
--------- ----------------------
------- ----------- -- -------------------------------------
------
--
-
-
------ ------- ------------上述组件是一个计数器，包含一个状态 count 和一个按钮，点击按钮可以将 count 的值加 1。接下来，我们使用 Enzyme 对该组件进行测试。
-- -------------------- ---- ------- -- ------------------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------- --- ------- -- -- - ----- ------- - -------------------- ---- --------------------------------------------- ------------ --- ----------- --- ------- -- -- - ----- ------- - -------------------- ---- ------------------------------------------------ ---- --- -------------- --- ------- -- -- - ----- ------- - -------------------- ---- ----- ------ - ----------------------- ------------------------- ------------------------------------------------ ---- ---
上述代码里，我们使用 shallow 渲染 MyComponent，并分别测试了组件的标题、计数器以及点击按钮是否能够增加计数器。可以看到，Enzyme 的测试代码非常简洁，而且易于理解和维护。
除了上述示例外，Enzyme 还提供了很多其他的 API 和工具，可以满足不同的测试需求。下面，我们来介绍一些 Enzyme 测试 React 应用的最佳实践。
最佳实践
嵌套组件测试
在测试 React 应用时，嵌套组件的测试是非常常见的需求。Enzyme 提供了 mount 方法，可以完整地渲染一个组件及其子组件，方便测试嵌套组件之间的交互和渲染。
it('renders nested components', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.find('NestedComponent').length).toEqual(1);
});上述测试代码中，我们假设 MyComponent 里面包含一个名为 NestedComponent 的子组件，然后使用 mount 渲染 MyComponent，并测试是否能够渲染出 NestedComponent。
需要注意的是，在测试嵌套组件时，应该先测试子组件，再测试父组件。这样能够保证测试的覆盖率和准确性。
Redux 应用测试
对于 Redux 应用，我们通常需要测试 Action、Reducer 和 Store 等部分。Enzyme 可以与 Redux 进行集成，方便测试 Redux 应用的各个方面。
首先，需要安装 redux-mock-store，该工具可以生成一个 mock store，方便测试 Redux 的 Reducer 和 Action。安装命令如下：
npm install --save-dev redux-mock-store
然后，我们可以使用该工具生成一个 mock store，并将其传递给 Enzyme 的 Provider 组件，以此来测试 Redux 应用。
-- -------------------- ---- -------
-- -------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ ----------- ---- ----------------
----- --------- - -------------------
----------- ---- ------- -- -- -
----- ----- - ----------- ------ - ---
----- ------- - --------
--------- --------------
------------ --
-----------
--
----------------------------------
---上述测试代码中，我们使用了 redux-mock-store 生成了一个 mock store，然后将其传递给 Enzyme 的 Provider 组件。这样 MyComponent 就可以通过 props 获取到 Redux Store 里的状态和方法了。
快照测试
在测试 React 应用时，快照测试是非常有用和常见的一种测试方式。快照测试可以将组件渲染出来的 HTML 静态字符串与预期结果进行比较，检测是否出现了意料之外的变化。
Enzyme 提供了 toMatchSnapshot 方法，可以方便地进行快照测试。
it('matches snapshot', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});上述代码中，我们使用 toMatchSnapshot 方法比较 MyComponent 在浅渲染下的快照结果。如果快照结果与预期的一致，测试就会通过。
需要注意的是，对于嵌套组件来说，最好先测试子组件的快照结果，再测试父组件的快照结果。这样能够提高测试的可维护性和准确性。
总结
Enzyme 是一个非常方便和实用的 React 应用测试工具。本文介绍了 Enzyme 的基本用法和一些最佳实践，包括嵌套组件测试、Redux 应用测试以及快照测试等。希望本文能够对大家了解 Enzyme 的使用和测试 React 应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f1947968c7c53b0d7e641