React 测试：Enzyme 的使用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的一个环节。React 是一种非常流行的前端框架，而 Enzyme 是一个测试 React 组件的工具库。Enzyme 提供了丰富的 API，可以使测试变得更加容易和灵活。本文将介绍 Enzyme 的使用方法，以及如何在测试 React 组件时使用它。

Enzyme 简介

Enzyme 是由 Airbnb 开发和维护的一个 React 组件测试工具库。它提供了一系列 API，可以让我们轻松地测试 React 组件的行为和渲染结果。Enzyme 支持三种方式来测试 React 组件：

shallow rendering: 浅渲染，用于测试组件中的单个元素，不会渲染出绑定事件的子组件
full DOM rendering: 完整 DOM 渲染，可测试组件在完整的 DOM 树中的行为，但比较耗费性能
static rendering: 静态渲染，只渲染组件的静态输出

Enzyme 支持的 React 版本为 v0.13.x、v0.14.x、v15.x 和 v16.x。

Enzyme 的安装和基本使用

使用 npm 安装 Enzyme：

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

Enzyme 需要添加一个适配器去适配我们正在使用的 React 版本。对于 React v16，我们需要安装 enzyme-adapter-react-16 适配器：

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

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

shallow rendering

shallow() 方法用于将组件渲染成一个虚拟的 DOM。这个虚拟的 DOM 只会渲染组件的第一层元素，其它子组件都只会是一个占位符。可以通过 debug() 方法来查看渲染结果：

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = shallow(<MyComponent />);
console.log(wrapper.debug());

full DOM rendering

mount() 方法用于在全局环境下渲染出当前组件的完整 DOM 结构，用于测试组件在真实的 DOM 中的交互和行为。可以通过 debug() 方法来查看渲染结果：

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = mount(<MyComponent />);
console.log(wrapper.debug());

static rendering

render() 方法用于在服务器端渲染 React 组件。这个方法和 shallow() 方法很像，也只渲染出组件的第一层元素。但是，与 shallow() 方法不同的是，这个方法返回的是一个 CheerioWrapper 对象，它是一个将虚拟 DOM 结构渲染成带有 jQuery API 的字符串的对象。可以通过 html() 方法来查看渲染结果：

import { render } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = render(<MyComponent />);
console.log(wrapper.html());

Enzyme 的常用 API

下面介绍一些常用的 Enzyme API。

ShallowWrapper

shallow(nodeOrSelector, [options]): 将组件渲染成一个虚拟的 DOM。其中 nodeOrSelector 可以为组件或 DOM 元素的选择器。
find(selector): 在当前 shallow 渲染的组件中查找匹配选择器的子组件，返回一个子组件 ShallowWrapper 对象。
at(index): 获取当前组件中索引为 index 的子组件，返回一个子组件 ShallowWrapper 对象。
prop(key): 获取当前组件的属性，即 key 对应的值。
props(): 获取当前组件的属性，返回一个属性对象。
state([key]): 获取当前组件的状态，如果 key 不存在，则返回完整的状态。
text(): 获取当前组件的文本内容。
simulate(eventName, [eventData]): 模拟触发当前组件的事件，可以传递一个事件数据对象，如：

wrapper.find('button').simulate('click', { preventDefault() {} })

MountWrapper

mount(nodeOrSelector, [options]): 在全局环境下渲染出当前组件的完整 DOM 结构。
find(selector): 在当前 mount 渲染的组件中查找匹配选择器的子组件，返回一个子组件 MountWrapper 对象。
at(index): 获取当前组件中索引为 index 的子组件，返回一个子组件 MountWrapper 对象。
prop(key): 获取当前组件的属性，即 key 对应的值。
props(): 获取当前组件的属性，返回一个属性对象。
state([key]): 获取当前组件的状态，如果 key 不存在，则返回完整的状态。
text(): 获取当前组件的文本内容。
simulate(eventName, [eventData]): 模拟触发当前组件的事件，可以传递一个事件数据对象，如：

wrapper.find('button').simulate('click', { preventDefault() {} })

CheerioWrapper

attr(name): 获取当前组件的指定属性值。
html(): 获取当前组件的 HTML 字符串。
text(): 获取当前组件的文本内容。

常见测试场景

测试组件的渲染结果

可以使用 shallow() 或 mount() 方法来测试组件的渲染结果，并且可以使用 Enzyme 提供的一些 API 来查找或测试特定元素或属性。

-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----------- -- -- -
    ----- ------- - -------------------- --------------- ----
    ----------------------------------
  ---

  ---------- ------ --- --------- -- -- -
    ----- ------- - -------------------- --------------- ----
    ----------------------------------------
    -------------------------------------------------
    ---------------------------------------------------------
    -------------------------------------------------
    -------------------------------------------------
  ---
---

测试组件交互行为

可以使用 simulate() 方法来模拟交互行为，比如点击事件、输入事件等。

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----- ------- -- -- -
    ----- ------- - ----------
    ----- ------- - ------------------ ----------------- ----
    -----------------------------------------
    -----------------------------------
  ---

  ---------- ------ ----- ------- -- -- -
    ----- -------- - ----------
    ----- ------- - ------------------ ------------------- ----
    ---------------------------------------- - ------- - ------ ------- - ---
    ------------------------------------
  ---
---

测试组件的状态变化

可以使用 state() 方法来获取组件的状态，并通过模拟交互行为来测试状态的变化。

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ --- ----- ----- ------- -- -- -
    ----- ------- - ------------------ ----
    -------------------------------------------
    -----------------------------------------
    -------------------------------------------
  ---
---

结语

本文介绍了 Enzyme 这个测试 React 组件的工具库，包括其安装、基本使用和常用 API。通过使用 Enzyme，我们可以轻松地测试 React 组件的行为和渲染结果，提高代码的可靠性和稳定性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c922c9e46428fe9e02eb6b

React 测试：Enzyme 的使用