Enzyme 测试 React 组件的技巧和提示-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 是 Facebook 推出的一款 React 组件测试工具，它提供了方便、易用、灵活的 API，使得测试变得更加容易和高效。在本文中，我们将介绍 Enzyme 的基本用法和一些技巧和提示，以便更好地测试 React 组件。

安装和配置

在使用 Enzyme 之前，我们需要先安装它。可以通过 npm 来进行安装：

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

其中，enzyme-adapter-react-16 是 Enzyme 针对 React 16.x 版本的适配器，如果使用其它版本的 React，需要安装相应的适配器。

接下来，我们需要在测试文件中引入 Enzyme 并配置适配器。以 Jest 为例，可以在 setupTests.js 文件中添加以下代码：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这样就完成了 Enzyme 的安装和配置。

基本用法

在测试 React 组件时，我们通常需要对组件的渲染结果和行为进行断言。Enzyme 提供了三种渲染方式，分别是浅渲染（Shallow Rendering）、完全渲染（Full DOM Rendering）和静态渲染（Static Rendering）。

浅渲染

浅渲染是指只渲染组件本身，不渲染其子组件。这种渲染方式的优点是速度快，但缺点是测试的覆盖范围有限。可以使用 shallow 方法进行浅渲染：

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);

在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，通过 wrapper.props 方法来获取组件的属性，通过 wrapper.state 方法来获取组件的状态。例如：

expect(wrapper.find('.my-class').length).toBe(1);
expect(wrapper.props().title).toBe('My Title');
expect(wrapper.state().isOpen).toBe(true);

完全渲染

完全渲染是指渲染整个组件树，包括子组件。这种渲染方式的优点是能够测试整个组件的行为，但缺点是速度较慢。可以使用 mount 方法进行完全渲染：

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);

在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，通过 wrapper.props 方法来获取组件的属性，通过 wrapper.state 方法来获取组件的状态。与浅渲染不同的是，完全渲染还可以通过 wrapper.instance() 方法来获取组件实例，进而测试组件的方法。例如：

expect(wrapper.find('.my-class').length).toBe(1);
expect(wrapper.props().title).toBe('My Title');
expect(wrapper.state().isOpen).toBe(true);
wrapper.instance().toggle();
expect(wrapper.state().isOpen).toBe(false);

静态渲染

静态渲染是指将组件渲染为静态 HTML 字符串，不包含任何交互逻辑。这种渲染方式的优点是速度最快，但缺点是无法测试交互逻辑。可以使用 render 方法进行静态渲染：

import { render } from 'enzyme';

const wrapper = render(<MyComponent />);

在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，但无法获取组件的属性和状态。例如：

expect(wrapper.find('.my-class').length).toBe(1);

技巧和提示

除了基本用法之外，Enzyme 还提供了一些技巧和提示，帮助我们更好地测试 React 组件。

使用 `describe` 和 `it` 组织测试用例

在编写测试用例时，可以使用 describe 和 it 来组织测试用例，使得测试更加清晰和易读。例如：

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

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

使用 `beforeEach` 和 `afterEach` 执行公共操作

在编写测试用例时，有些操作需要在每个测试用例中都执行，例如创建组件实例、清空组件状态等。可以使用 beforeEach 和 afterEach 来执行这些公共操作，避免重复代码。例如：

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

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

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

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

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

使用 `jest.fn` 模拟函数调用

在测试组件的交互逻辑时，有些操作需要调用外部函数，例如调用 API、发送事件等。可以使用 jest.fn 来模拟这些函数调用，避免对外部环境造成影响。例如：

describe('MyComponent', () => {
  it('should call handleClick when button is clicked', () => {
    const handleClick = jest.fn();
    const wrapper = shallow(<MyComponent onClick={handleClick} />);
    wrapper.find('button').simulate('click');
    expect(handleClick).toHaveBeenCalled();
  });
});

使用 `enzyme-to-json` 生成快照

在测试组件的 UI 时，有时候需要生成 UI 快照，以便进行比较。可以使用 enzyme-to-json 来将 Enzyme 的渲染结果转换为 JSON 格式，以便生成快照。例如：

npm install --save-dev enzyme-to-json

import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

const wrapper = shallow(<MyComponent />);
expect(toJson(wrapper)).toMatchSnapshot();

示例代码

下面是一个完整的测试用例，用于测试一个简单的计数器组件：

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

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

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

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

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

总结

Enzyme 是一款非常实用的 React 组件测试工具，它提供了丰富的 API 和一些技巧和提示，使得测试变得更加容易和高效。在编写测试用例时，我们应该使用合适的渲染方式、组织测试用例、执行公共操作、模拟函数调用和生成快照，以便更好地测试 React 组件。

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

Enzyme 测试 React 组件的技巧和提示