React 是当今最流行的前端开发框架之一，提供了强大的实现能力和灵活的组件化开发方式。然而，为确保 React 应用的正确性和稳定性，测试是必不可少的。Enzyme 是一种 React 测试工具，它提供了一组可以方便地查找，模拟和与 DOM 交互的实用程序。
在本文中，我们将探讨 Enzyme 的基本概念，如何使用它来测试 React 应用，并解决常见问题。
Enzyme 简介
Enzyme 是一个由 Airbnb 维护的 React 测试工具，可以帮助你模拟 React 组件的渲染结果，以便你能够在测试中对它们进行检查。它提供了一系列实用程序，使组件的查找，模拟交互和输出变得非常方便。
Enzyme 具有 3 个渲染器：Shallow, Mount 和 Render。Shallow 渲染仅渲染组件本身，不会渲染子组件。Mount 渲染将组件和其子组件渲染到 DOM 中。Render 渲染仅渲染组件本身，但是以静态 HTML 字符串的形式返回它。
如何使用 Enzyme 进行测试
在使用 Enzyme 进行测试时，我们需要引入它的 API 方法。通常，我们将 Enzyme 安装为 devDependencies。安装命令如下：
npm install --save-dev enzyme
在测试文件中，我们需要将 Enzyme 引入并声明所需的渲染器方法。示例代码如下：
import { shallow, mount, render } from 'enzyme';
import React from 'react';
import App from '../App';
describe('<App />', ()=>{
//....
});接下来让我们看一下 Enzyme 提供的 API 方法和如何使用它们。
Shallow 方法
Shallow 方法仅仅渲染组件及其直接子组件，找到它们并返回用于测试的包装器。 这使得浅层渲染成为一种快速测试组件的方法。
我们可以使用 Shallow 方法来创建一个包装器，如下所示：
const wrapper = shallow(<App />);
接着，我们可以使用 find 来查找内部元素。示例代码如下：
const wrapper = shallow(<App />);
expect(wrapper.find('.header')).toBeDefined();Mount 方法
Mount 方法将组件及其子组件渲染到 DOM 中，使您可以测试组件在其他组件中的交互。我们可以使用 Mount 方法来创建一个包装器，如下所示：
const wrapper = mount(<App />);
与 Shallow 方法不同之处在于 Mount 渲染了整个组件树，并且可以访问它们的 DOM。
Render 方法
Render 方法渲染组件，但是返回它的静态 HTML 字符串，通常只在组件输出渲染结果时使用。我们可以使用 Render 方法来创建一个包装器，如下所示：
const wrapper = render(<App />);
模拟交互
Enzyme 还提供了一些模拟交互的方法。例如，我们可以使用 simulate 方法模拟单击事件。示例代码如下：
it('should change display message on click', () => {
const wrapper = mount(<App />);
const button = wrapper.find('.btn');
button.simulate('click');
expect(wrapper.find('.message').text()).toEqual('Button clicked!');
});Redux 测试
Enzyme 可以用于测试 Redux 应用程序，一个常见的方法是使用 redux-mock-store 库。redux-mock-store 允许我们创建一个伪造的 Redux store，以便我们可以测试 action，同时避免触发不必要的副作用。示例代码如下：
-- -------------------- ---- -------
------ -------------- ---- -------------------
------ ----- ---- --------------
----- ----------- - --------
----- --------- - ----------------------------
--------------- --------- -- -- -
----------- ------------- ---- -------- --- ---- ------ -- -- -
----- --------------- - -
- ----- --------------- --
- ----- ---------------- -------- - ---- - --
--
----- ----- - ----------- ----- -- ---
------ ----------------------------------- -- -
----------------------------------------------------
---
---
---常见问题的解决方法
问题 1：测试中的 Wrapper.state() 返回 undefined
通常，当在组件中使用类属性时，其默认值将是静态。因此，即使你通过 setState 更改组件状态，类属性仍将保持其初始值，这就是为什么您在调用 Wrapper.state() 方法时会得到 undefined。
解决方法是要正确定义组件的初始状态。修改组件代码后，如下所示：
class App extends Component {
constructor(props) {
super(props);
this.state = { message: 'Hello World!' };
}
//....
}这将确保您可以通过 Wrapper.state() 方法获取组件的当前状态。
问题 2：TypeError: Cannot read property 'nodeName' of null
这个问题可能是在模拟事件时捕获 DOM 时引起的。通常，这种情况会发生在我们尝试模拟与不存在的 DOM 元素交互时。要解决这个问题，我们需要检查是否存在 DOM 元素。示例代码如下：
it('should not throw an error if onClose property is not passed', () => {
const wrapper = mount(<Alert open={true} onClose={undefined} />);
expect(wrapper.find('.close').length).toEqual(0);
});结论
在本文中，我们探讨了 Enzyme 的基本概念，如何使用它来测试 React 应用，并解决了一些常见问题。了解如何使用 Enzyme 的各种技巧和方法是测试 React 应用程序的关键，使您可以更轻松地确保正确性和稳定性。希望本文能够为您提供一些有用的指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674eae54e884a3e30f2913ad