如果你是一名Front-end开发者，那么你一定用过 Enzyme 这个 React 测试工具。它通过提供一组易于使用的 API，让我们轻松地对组件进行测试。Enzyme 不仅仅是一个测试工具，它还是了解 React 组件渲染方式的绝佳工具。在本文中，我们将深入探讨 Enzyme 的四个渲染阶段。这将帮助我们更好地理解 Enzyme 执行测试的过程。
前置知识
在深入研究 Enzyme 渲染阶段之前，让我们先简要介绍一下 React 中组件的渲染过程。当你的应用程序加载时，React 将根据组件层次结构启动渲染引擎。然后它将执行以下步骤：
- 组件的实例化： React 首先会创建组件的 class 或 function 实例。
- 组件的卸载： 如果父组件已经卸载或者该组件被删除，则卸载正在进行中的渲染。
- 组件的生命周期钩子方法： React 将逐个调用组件的钩子方法。render() 方法是在这里运行的。
- 组件的 DOM 渲染： 如果该组件有 UI 部分，则React将进行渲染并将结果插入到父组件的 DOM 中。
Enzyme 渲染阶段
恰巧，在 React 中有四个渲染阶段。Enzyme API 非常好地映射了这些阶段。让我们了解一下这四个阶段，以及相应的 Enzyme API，以便我们可以更好地使用 Enzyme 编写测试套件。
1. shallow()
shallow()方法渲染当前组件，但是不会渲染其子组件。shallow 渲染是比较浅层的渲染，它非常适合测试组件的单个方面，例如呈现、触发事件、修改状态等。让我们看一下一个简单的例子：
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should render correctly with heading', () => {
const component = shallow(<MyComponent />);
const heading = component.find('h1');
expect(heading.text()).toEqual('Hello World!');
});
});在这个示例中，我们使用 shallow()方法来渲染 <MyComponent> 组件，然后找到呈现 <h1> 标签的指定元素，并断言元素的文本内容是否正确。
2. mount()
mount()方法将组件以及所有子组件渲染到真实的 DOM 中。这意味着你可以测试 React 组件的所有功能，包括它的子组件，以及 DOM 的交互。让我们看一个例子：
import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should render correctly with button', () => {
const onClick = jest.fn();
const component = mount(<MyComponent onClick={onClick} />);
const button = component.find('button');
button.simulate('click');
expect(onClick).toHaveBeenCalledTimes(1);
});
});在上面的示例中，我们使用了 mount()方法来渲染 <MyComponent> 组件，并将此组件的 onClick() 方法传入该组件。然后，我们找到了 <button> 元素，并使用 simulate() 方法模拟了单击事件。最后，我们断言触发的回调函数被调用了一次。
3. render()
render()方法与 shallow()方法非常相似，都是用于渲染当前组件，但是它会以静态 HTML 格式呈现模拟的DOM树。这意味着它仅返回 HTML 结构，而不是 DOM 节点。让我们看一个例子：
import React from 'react';
import { render } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should render correctly with basic structure', () => {
const component = render(<MyComponent />);
const html = component.html();
expect(html).toEqual('<div><h1>Hello World!</h1></div>');
});
});在上面的示例中，我们使用 render()方法渲染 <MyComponent> 组件，并断言 HTML 是否与预期内容匹配。
4. unmount()
unmount()方法将卸载组件及其所有子组件，并在适当的处理程序中删除其是否已经在 DOM 中。这个方法是被动的，因为你不需要在测试时使用它。它在你完成测试后自动调用。在大多数情况下，你不需要手动调用它，因为在大多数时候，Enzyme 会自动处理它。
总结
在我们了解了 Enzyme 的四个渲染阶段后，你将能够更好地使用 Enzyme 编写测试套件。记住：
shallow()方法用于渲染当前组件；mount()方法将组件以及所有子组件渲染到真实的 DOM 中；render()方法与shallow()非常相似，但是它会以静态 HTML 格式呈现模拟的DOM树；unmount()方法将卸载组件及其所有子组件；
用这些 API 来编写更好的测试套件，从而在构建可靠的应用程序时提高您的效率和准确性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65baec82add4f0e0ff3817fb