React 组件调试利器 Enzyme 源码分析与实践-JavaScript中文网-JavaScript教程资源分享门户

React 是现代前端开发中非常流行的一个框架，而组件是 React 开发中最为基础和核心的部分。调试组件是 React 开发中非常重要的一个环节，而 Enzyme 是 React 组件调试中非常实用和常用的一个库。

本文旨在通过对 Enzyme 的源码分析和实践，帮助读者更深入地了解 Enzyme 的原理和使用，从而更好地调试和开发 React 组件。

什么是 Enzyme

Enzyme 是一个由 Airbnb 开源的 React 组件测试工具库。它提供了一系列简单易用的 API，使得我们可以通过模拟用户行为、渲染组件等方式来测试 React 组件的正确性。

Enzyme 的优势

相对于 React 官方推出的测试工具 Jest，Enzyme 有以下优势：

Enzyme 支持更广泛的测试，包括渲染、事件触发、组件状态断言等；
Enzyme 的 API 更加简洁易用，开发者可以更加灵活地编写测试用例；
Enzyme 可以方便地和其他测试工具库集成，例如 Mocha、Chai、Sinon 等。

Enzyme 的安装与配置

要使用 Enzyme，需要先进行安装。运行以下命令安装 Enzyme：

npm install --save-dev enzyme

安装完成后，你还需要根据你的 React 版本来安装适当的适配器，以便 Enzyme 可以正常工作。如果你是用的 React 16，可以运行以下命令安装对应的适配器：

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

接下来在测试文件中进行配置：

import 'jsdom-global/register';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这里使用了 jsdom-global 库，用来在 Node.js 环境中模拟浏览器运行环境。这样我们就可以在 Node.js 环境中使用 Enzyme 来测试 React 组件了。

Enzyme 的 API

Enzyme 有三个主要的 API：

shallow：渲染组件的浅层次渲染，只会渲染组件本身，不会包含子组件；
mount：渲染组件的完成渲染，会递归渲染子组件；
render：将组件渲染成静态的 HTML，用于测试组件的渲染结果是否正确。

这里先使用 shallow 和 mount API 进行演示。

在之前的配置文件中已经引入了 Enzyme 和 Adapter，下面我们来创建一个简单的 React 组件，供后面的组件演示使用：

import React from 'react';

export default function HelloWorld(props) {
  return <div>Hello, {props.name}!</div>;
}

shallow API 的使用

下面演示如何使用 shallow API 测试这个组件：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import HelloWorld from './HelloWorld';

describe('HelloWorld component', () => {
  it('should display hello message', () => {
    const wrapper = shallow(<HelloWorld name="World" />);

    expect(wrapper.text()).toEqual('Hello, World!');
  });
});

我们在测试代码中使用 shallow 方法来渲染 HelloWorld 组件，然后进行断言测试渲染结果是否正确。

在运行测试之前，我们需要先安装一些测试相关的库。在命令行中进入项目目录，执行以下命令来安装测试所需的库：

npm install --save-dev jest jest-cli babel-jest enzyme react-test-renderer

其中：

jest 是一个测试框架；
jest-cli 是命令行运行测试的工具；
babel-jest 是一个让 Jest 支持 Babel 转换的库；
enzyme 是用来测试 React 组件的工具库；
react-test-renderer 是 React 官方的测试工具库，可以用来快速渲染 React 组件。

运行以下命令来执行测试：

npx jest test/HelloWorld.test.js --watchAll

如何输出您想要的消息可以使用以下命令

jest test/HelloWorld.test.js -t "the description of the test case" -o

其中：

npx jest 是运行 Jest 的命令；
test/HelloWorld.test.js 是测试文件所在的路径；
--watchAll 是让 Jest 监听文件修改并重新运行测试。

如果测试通过，则控制台会输出测试结果：

// javascriptcn.com 代码示例
PASS  test/HelloWorld.test.js
  HelloWorld component
    ✓ should display hello message (6 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.331 s
Ran all test suites matching /test\/HelloWorld.test.js/i.

mount API 的使用

下面演示如何使用 mount API 测试这个组件：

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import HelloWorld from './HelloWorld';

describe('HelloWorld component', () => {
  it('should display hello message', () => {
    const wrapper = mount(<HelloWorld name="World" />);

    expect(wrapper.text()).toEqual('Hello, World!');
  });
});

我们在测试代码中使用 mount 方法来渲染 HelloWorld 组件，然后进行断言测试渲染结果是否正确。

在运行测试之前，我们需要先安装一些测试相关的库。在命令行中进入项目目录，执行以下命令来安装测试所需的库：

npm install --save-dev jest jest-cli babel-jest enzyme react-test-renderer

其中：

jest 是一个测试框架；
jest-cli 是命令行运行测试的工具；
babel-jest 是一个让 Jest 支持 Babel 转换的库；
enzyme 是用来测试 React 组件的工具库；
react-test-renderer 是 React 官方的测试工具库，可以用来快速渲染 React 组件。

运行以下命令来执行测试：

npx jest test/HelloWorld.test.js --watchAll

如果测试通过，则控制台会输出测试结果：

// javascriptcn.com 代码示例
 PASS  test/HelloWorld.test.js
  HelloWorld component
    ✓ should display hello message (39 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.824 s
Ran all test suites matching /test\/HelloWorld.test.js/i.

Enzyme API 的其他用法

除了 shallow 和 mount 方法外，Enzyme 还提供了一些其他方法。下面简要介绍一下：

find(selector)：查找包含特定选择器的子组件；
at(index)：获取包装器中渲染出的组件中指定的索引的组件；
simulate(event[, ...args])：模拟事件，方法参数为触发事件的名称和选项；
prop(key)：获取包装器的特定属性；
props()：获取包装器的属性对象；
state([key])：获取组件的状态；
setState(state[, callback])：设置组件的状态；
instance()：获取实际渲染的组件实例。

这里不再详细介绍，想了解更多信息可以参考 Enzyme 官方文档：https://enzymejs.github.io/enzyme/

Enzyme 源码分析

Enzyme 的底层原理，就是通过 React 的生命周期方法获取组件的实例，然后利用 jQuery 的查找方法来操作组件及其子组件。

了解了 Enzyme 的 API 和底层原理，我们来看一下 Enzyme 的源码。

Enzyme 主要包含三个模块，分别是 shallow、mount 和 render。其中，shallow 和 mount 的实现方式比较类似，这里分析 shallow 实现的源码。

shallow 的实现原理

// javascriptcn.com 代码示例
export function shallow(node, { context, disableLifecycleMethods = false, ...renderOptions } = {}) {
  const renderer = createRenderer({
    mode: 'shallow',
    ...renderOptions,
    isShallow: true,
  });

  return {
    ...shallowMethods(renderer, context, disableLifecycleMethods),
    single(node) {
      return this.singleWithContext(node, context);
    },
    singleWithContext(node, providedContext) {
      return this.renderWithProps({ ...node.props, children: node.children }, true, providedContext);
    },
    singleWithoutChildren(node) {
      return this.renderWithProps({ ...node.props, children: [] }, true);
    },
    renderWithProps(props, isSingle, providedContext) {
      if (providedContext) {
        renderer.render(elementFromPropsAndContext(props, providedContext));
      } else {
        renderer.render(React.createElement('div', undefined, props));
      }

      if (isSingle) {
        return renderer.getRenderOutput().props.children || null;
      }

      return this.wrap(renderer.getRenderOutput());
    },
    renderProp(propName) {
      return (...args) => this.singleWithContext(this.get(propName)(...args));
    },
    ...createShallowRenderer(renderer._instance),
  }.render(node, context);
}

我们来一步一步看这段代码。

首先调用 createRenderer 方法创建一个 Renderer 实例。这个 Renderer 实例用来渲染 React 组件、渲染子组件等操作：

const renderer = createRenderer({
  mode: 'shallow',
  ...renderOptions,
  isShallow: true,
});

接着返回一个对象，这个对象包含了一些测试 React 组件时使用的方法：

// javascriptcn.com 代码示例
return {
  ...shallowMethods(renderer, context, disableLifecycleMethods),
  single(node) {
    return this.singleWithContext(node, context);
  },
  singleWithContext(node, providedContext) {
    return this.renderWithProps({ ...node.props, children: node.children }, true, providedContext);
  },
  singleWithoutChildren(node) {
    return this.renderWithProps({ ...node.props, children: [] }, true);
  },
  renderWithProps(props, isSingle, providedContext) {
    if (providedContext) {
      renderer.render(elementFromPropsAndContext(props, providedContext));
    } else {
      renderer.render(React.createElement('div', undefined, props));
    }
  
    if (isSingle) {
      return renderer.getRenderOutput().props.children || null;
    }
  
    return this.wrap(renderer.getRenderOutput());
  },
  renderProp(propName) {
    return (...args) => this.singleWithContext(this.get(propName)(...args));
  },
  ...createShallowRenderer(renderer._instance),
}.render(node, context);

这些方法包括：

single(node)：传入组件节点，返回最终渲染出来的节点；
singleWithContext(node, providedContext)：传入组件节点和上下文参数，返回最终渲染出来的节点；
singleWithoutChildren(node)：传入组件节点，返回最终渲染出来的节点，但是子节点为空；
renderWithProps(props, isSingle, providedContext)：传入组件属性、是否单个节点和上下文参数，返回最终渲染出来的节点；
renderProp(propName)：传入属性名称，返回根据该属性名称生成的渲染器方法；
...createShallowRenderer(renderer._instance)：调用 createShallowRenderer 方法，接受一个实例作为参数，并将方法拷贝到当前对象中。

接下来我们来详细看一下 singleWithContext 和 renderWithProps 方法。

singleWithContext 方法的实现

下面是 singleWithContext 的实现代码：

singleWithContext(node, providedContext) {
  return this.renderWithProps(
    { ...node.props, children: node.children },
    true,
    providedContext
  );
}

这个方法是通过 renderWithProps 方法生成组件节点，并将 isSingle 参数设置为 true。这样我们就可以得到单个渲染出来的组件节点了。

renderWithProps 方法的实现

下面是 renderWithProps 的实现代码：

// javascriptcn.com 代码示例
renderWithProps(props, isSingle, providedContext) {
  if (providedContext) {
    renderer.render(elementFromPropsAndContext(props, providedContext));
  } else {
    renderer.render(React.createElement('div', undefined, props));
  }

  if (isSingle) {
    return renderer.getRenderOutput().props.children || null;
  }

  return this.wrap(renderer.getRenderOutput());
}

这个方法首先判断有没有传入 providedContext 参数，如果传了就使用 elementFromPropsAndContext 方法创建带有上下文参数的 React 组件，否则就使用 React.createElement 来创建并渲染组件。

经过 renderer.render() 渲染之后，这个方法返回的是一个经过包装的 React 组件。我们可以调用 wrap 方法将这个包装后的组件转换为 Enzyme 包装器，然后进行操作，例如查找子节点等。

总结

通过对 Enzyme 的源码分析和实践，我们更深入地了解了 Enzyme 的原理和使用方法。Enzyme 的底层原理就是通过 React 的生命周期方法获取组件的实例，然后利用 jQuery 的查找方法来操作组件及其子组件。

在使用 Enzyme 进行 React 组件测试时，我们需要注意使用适当的 API 来测试组件，同时结合 Jest 等测试框架进行测试。如果您想要深入了解 React 的相关内容，可以继续学习 React 的生命周期和 Redux 等知识。

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