React 是现如今最流行的 JavaScript 库之一，它使我们能够轻松地构建复杂的用户界面。但是，界面必须保持一致的同时也需要不断进行更新，这意味着我们需要执行大量的测试，以确保新的更改不会破坏现有的功能。 这正是 Enzyme 保持 React 优秀的方法之一。Enzyme 是一个由 Airbnb 开发的 React 组件测试工具，这个工具可以帮助我们针对 React 组件编写完整的测试，以确保其正常对外部进行交互和功能和效果的一致性。
Enzyme 介绍
Enzyme 提供了一个类似于 jQuery 的接口，这使得我们可以轻松地进行，React 元素的查找、触发事件和测试组件的方法和属性等相关操作。
Enzyme 支持三种渲染方式，分别是：静态渲染、Shallow 渲染和完全渲染:
静态渲染: 简单地将组件作为 React 元素渲染并返回其输出的 HTML。这种方式不需要安装 React 而且对于快速测试大表单的输出非常有用。
Shallow 渲染: 与静态渲染类似，但是该方法只渲染一个组件而不会像常规渲染那样向下渲染其子组件。这使得我们能够轻松测量组件和其所包含的内容，而无需考虑其子组件的影响。
完全渲染: 是常规的渲染方式，它渲染组件的所有子组件并使其有功能性的测试。
安装和配置 Enzyme
为了使用 Enzyme 进行 React 组件测试，我们需要首先安装 enzyme 和 react-test-renderer 两个包。
npm install --save enzyme react-test-renderer
为了使 Enzyme正确运作，需要确保在文件顶部导入 ReactShallowRenderer 和 ReactTestUtils：
import {configure, shallow, mount, render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});接下来，你就可以开始写 Enzyme 测试用例了。
静态渲染
静态渲染是以常规 HTML 字符串的形式，对 React 组件进行渲染和测试。这种类型的渲染通常用于简单的组件和大表单的批量输出。
以下是一个简单的 React 组件：
import React from 'react';
const Greeting = ({name}) => (
<div className="greeting">Hello {name}!</div>
);
export default Greeting;为此，我们可以编写一个简单的测试用例来测试这个 Greeting 组件 ：
describe('Greeting component', () => {
const component = render(<Greeting name="John" />);
it('should display greeting message', () => {
expect(component.text()).toEqual('Hello John!');
});
});shallow 渲染
Shallow 渲染测试代表了你的组件的行为，通过忽略嵌套子组件并对其进行简单的替代。这种渲染方式是 Enzyme 中最常用的测试方式，用于测试 React 组件不同的状态。
针对同样的 Greeting 组件和测试：
describe('Greeting component', () => {
it('should render the name', () => {
const wrapper = shallow(<Greeting name="John" />);
const welcome = <div>Hello John!</div>;
expect(wrapper.contains(welcome)).toEqual(true);
});
});完整渲染
完整渲染是 Enzyme 中最强大的渲染方式，它便于测试组件的行为，包括交互，状态，表单域以及更多。为此，我们可以在全渲染模式下测试以下 Button 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
----- ----------- - ----------
-------------------- -- -- -
----- ------- - --------------- --------------------- ----
---------- ----- -- -------- -- -- -
-----------------------------------------
---------------------------------------
---
---这里我们使用 mount 函数来对我们 MyButton 组件进行完整渲染。随后，我们检查是否可以通过使用 simulate 方法轻松单击该按钮并调用 onClickMock 方法。
结论
在本文中，我们介绍了 Enzyme - 一个用于 React 组件测试的 JavaScript 库。此外，我们还学习了三种渲染方式：静态渲染，而浅层渲染和完全渲染。每种渲染方式都具有其不同的优点，并且可以在 Enzyme 中轻松应用。
使用 Enzyme 测试服务，开发人员可以轻松地测试他们的 React 组件，同时提高应用的质量。如果您一直在寻找一种测试 React 组件的方法，Enzyme 可以成为你最好的选择，祝你有一个愉快的开发之旅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67501841fbd23cf890735048