详解 Enzyme 的 Adapter 机制，让你了解 React 更多-JavaScript中文网-JavaScript教程资源分享门户

在 React 应用开发中，测试是非常重要的一环。Enzyme 是一个 React 测试工具库，它提供了一个简单而优雅的 API 来测试 React 组件的输出。本文将介绍 Enzyme 的 Adapter 机制，希望能够让读者更深入地了解 React 并提高测试代码的质量。

Enzyme 是什么？

Enzyme 是由 Airbnb 开源的 React 测试工具库，它提供了一套 API 来模拟用户行为、渲染组件树，并对测试输出进行断言。Enzyme 接受多种渲染方式：浏览器环境中使用 jsdom、Node.js 环境中使用 Node 和 Cheerio，以及 React Native。

在 Enzyme 中，有三种渲染方式，分别是：shallow、mount 和 render。其中，shallow 是浅渲染，能够测试组件的 UI 输出和交互行为；mount 是深渲染，能够测试组件的子组件和生命周期方法；render 能够渲染组件到一个静态的 HTML 字符串中。

Adapter 是什么？

Adapter 是 Enzyme 的重要概念之一，它是当 Enzyme 渲染 React 组件时所需的一组底层库的绑定。Enzyme 支持三种 Adapter，分别是 EnzymeAdapter React 16、Enzyme-adapter-react-15 和 Enzyme-adapter-utils。

在 React 16.0.0 版本之后，它增加了 Fiber 底层架构，整个架构发生了巨大的变化，因此 Enzyme 增加了一种新的 Adapter，EnzymeAdapter React 16。如果你的 React 版本低于 16.0.0，那么你需要使用 Enzyme-adapter-react-15。

Enzyme-adapter-utils 是一个通用的测试工具库，不仅仅适用于 React，而且还包括了一些通用的实用函数。

使用 Adapter 进行渲染

使用 Adapter 进行渲染很简单，只需要在使用之前先安装 Adapter，并在测试文件中引入 Adapter 和 Enzyme。以 EnzymeAdapter React 16 为例，安装命令如下：

npm install --save-dev enzyme enzyme-adapter-react-16

在测试文件中，应该将 EnzymeAdapter React 16 导入到文件中，并在使用之前调用适配器的配置方法 configure()。示例代码如下所示：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

这个配置方法只需要调用一次即可，之后在测试过程中就可以使用 Enzyme 进行组件的渲染和断言输出。

Adapter 的指导意义

适配器机制使 Enzyme 能够针对不同的环境使用不同的渲染器。这样，开发人员就可以在多个不同平台上测试组件，而不需要编写平台特定的测试代码。另外，使用适配器还可以使 Enzyme 更具扩展性和兼容性，因为它可以轻松地适应未来可能变化的 React 底层架构。

实例应用

下面是一个组件 Count 的示例代码，它接收两个 prop 值：count 和 onCountChange，并通过按钮点击事件改变 count 的值。使用 shallow 方法进行浅渲染后，断言 count 组件渲染后输出的 HTML 代码，代码如下所示：

// javascriptcn.com 代码示例
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
import Count from './Count';

// Enzyme Adapter 配置
configure({ adapter: new Adapter() });

describe('Count 组件', () => {
  it('正常渲染', () => {
    const count = 0;
    const onCountChange = () => {};
    const wrapper = shallow(
      <Count count={count} onCountChange={onCountChange} />
    );
    const h2Ele = wrapper.find('h2');
    const buttonEle = wrapper.find('button');
    
    expect(h2Ele).toHaveLength(1);
    expect(buttonEle).toHaveLength(1);
    expect(wrapper.text()).toEqual(`count：${count}`);

    buttonEle.simulate('click');
    expect(wrapper.text()).toEqual(`count：${count + 1}`);
  });
});

总结

本文介绍了 Enzyme 的 Adapter 机制，它是 Enzyme 的重要概念之一。了解 Adapter 的概念和使用方法可以使你更好的进行 React 项目测试。希望这篇文章能够帮助你更深入地了解 React 和 Enzyme，并在开发过程中提供参考。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651f85cb95b1f8cacd713a6f