React 是目前前端开发趋势的代表之一，但是对于新手，如何有效地测试 React 组件也是一项难题。Enzyme 是 React 官方推荐的测试工具之一，它提供了一套 API 与 jQuery 风格的语法，使得我们能够轻松地测试我们的 React 组件。本文将介绍 Enzyme 的使用方法以及常见问题的解决方法，并带你通过实例掌握 Enzyme 的奥妙。
Enzyme 简介
Enzyme 是由 Airbnb 开发的 React 测试工具，它为 React 组件测试提供了一套简洁、优雅并且易于使用的 API。Enzyme 支持浅渲染、全渲染以及仿 DOM 操作等多种测试方法，并且还提供了一个快照测试工具，能够帮助我们保障代码的质量。
安装
安装 Enzyme 很简单，只需执行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme 是 Enzyme 的主要依赖，enzyme-adapter-react-16 是 Enzyme 与 React 适配器的依赖，react-test-renderer 是 React 官方提供的 React 测试工具。
使用
下面我们将演示如何使用 Enzyme 来测试一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
-------- -
------ -
---------- -----------------------
--
-
-首先，在我们的测试文件中导入 Enzyme：
import { shallow } from 'enzyme';接着，使用我们的测试方法：
it('renders the correct text', () => {
const wrapper = shallow(<Greeting name="World" />);
const text = wrapper.find('h1').text();
expect(text).toEqual('Hello, World!');
});这个测试方法的意思是，当我们向 Greeting 组件传递名字为「World」时，它会在页面上展示「Hello, World!」。测试方法的实现方式非常简单，首先使用 Enzyme 的 shallow 方法来进行浅层渲染，然后使用 find 方法找到我们期待的元素，最后使用 text 方法来获取元素的文本，并断言是否符合预期。
除了浅层渲染外，Enzyme 还提供了 fullDOM 渲染方法 mount，可以使得我们更方便地进行仿真操作。同时，我们也可以使用 simulate 方法来模拟用户交互，例如模拟点击事件：
it('simulates click event correctly', () => {
const onButtonClick = jest.fn();
const wrapper = mount(<Button onClick={onButtonClick} />);
wrapper.find('button').simulate('click');
expect(onButtonClick).toHaveBeenCalled();
});这个测试方法的意思是，我们期望当用户点击某个按钮时，Button 组件输出的 onClick 事件将被调用。我们通过 jest.fn() 模仿一个函数并将其传递给 Button 组件的 onClick 事件，然后使用 Enzyme 的 mount 方法进行全渲染，并通过 find 方法找到我们期望的元素，最后使用 simulate 方法模拟一个点击事件，并断言 onButtonClick 函数是否被调用。
常见问题解决
关于前置条件
在某些特殊情况下，我们需要通过测试前置条件来构建我们的测试环境。例如，在我们需要测试一个列表渲染组件时，我们需要先通过测试后端接口来保证列表数据的正确性。
针对这种情况，我们可以使用 jest 提供的 beforeAll 和 beforeEach 方法来构建前置条件：
-- -------------------- ---- -------
-------------- ----------- -- -- -
--- -----
------------ -- -
------------------------- -- -
---- - ---------
---
---
------------- -- -
--------- - ------------- ----------- ----
---
----------- ----------- -- -- -
-- ----
---
---其中 beforeAll 与 beforeEach 的区别在于，beforeAll 只会在整个测试套件开始之前调用一次，而 beforeEach 则会在每个测试用例之前调用一次。
关于异步操作
在进行某些测试时，我们需要保证某些异步操作已经完成后再进行断言，例如测试数据加载的正确性等。这时候我们需要使用 Jest 的 done 方法来保证异步操作正确地进行:
it('fetches comments correctly', (done) => {
const component = mount(<CommentBox />);
component.instance().fetchComments().then(() => {
expect(component.state().comments).toHaveLength(500);
done();
});
});需要注意的是，我们必须在测试用例中显式地调用 done() 方法来保证异步操作已经完成。
关于模拟 Props
当我们需要测试一个基于 props 的组件时，我们需要模拟存在的 props。这时，我们可以使用 enzyme 的 setProps API 来模拟 props 的传入：
it('renders correctly with new props', () => {
const wrapper = shallow(<Greeting name="Michelle" />);
expect(wrapper.text()).toEqual('Hello, Michelle!');
wrapper.setProps({ name: 'Alex' });
expect(wrapper.text()).toEqual('Hello, Alex!');
});这个测试用例的意思是，当 Greeting 组件接收到 name 为 Michelle 的 props 时，它将在页面上展示「Hello, Michelle!」，而当我们使用 setProps 方法来将 name 修改为 Alex 时，组件应该展示「Hello, Alex!」。
结论
本文介绍了 Enzyme 的使用方法以及常见问题的解决方法，并通过实例用更为深入、细致的方法来引导读者掌握 Enzyme 的核心知识。我们相信，通过本文的学习，读者将能够轻松、高效地进行 React 组件的测试，并在实践中更好地理解 Enzyme 的良好设计。如有其他问题或疑问，欢迎以评论的形式在下方提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774b6f86d66e0f9aaef9738