Enzyme 的基本使用教程与实例教学-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 的基本使用教程与实例教学

Enzyme 是一款 React 组件测试工具，它可以模拟用户在真实环境下对组件的操作和事件触发，并根据预期结果进行断言。本文将为您介绍 Enzyme 的基本使用方法，包括安装、配置和常用 API，以及实例教学和示例代码。

一、安装和配置

Enzyme 是基于 JSDOM 和 Cheerio 的，所以在使用之前需要安装这两个工具。在项目根目录下执行以下命令：

npm install --save-dev enzyme jsdom cheerio

此外，为了使用 Enzyme，还需安装 React 和 Enzyme 的适配器：

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

在项目根目录下创建一个 setupTests.js 文件，用于配置 Enzyme 的默认适配器：

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

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

二、常用 API

mount()：渲染组件并返回一个包含当前组件的实例的 ReactWrapper 对象，以便我们可以在其上执行 DOM 查询和操作。

import React from 'react';
import {mount} from 'enzyme';

it('renders correctly', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find('.my-class')).toHaveLength(1);
});

shallow()：与 mount() 类似，但只渲染当前组件的浅层副本，可以提高渲染效率。

import React from 'react';
import {shallow} from 'enzyme';

it('renders correctly', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('.my-class')).toHaveLength(1);
});

render()：在节点上进行查找、断言和操作之前，可通过 render() 方法将 React 组件渲染为一组 JSON 的静态 HTML。

import React from 'react';
import {render} from 'enzyme';

it('renders correctly', () => {
  const wrapper = render(<MyComponent />);
  expect(wrapper.find('.my-class')).toHaveLength(1);
});

find()：在当前 ReactWrapper 对象中查找匹配选择器的子节点。

import React from 'react';
import {mount} from 'enzyme';

it('renders correctly', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find('.my-class')).toHaveLength(1);
});

contains()：查找当前 ReactWrapper 对象中是否包含了给定的 React 元素。

import React from 'react';
import {mount} from 'enzyme';

it('renders correctly', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.contains(<div className="my-class">Hello world!</div>)).toBeTruthy();
});

simulate()：在当前 ReactWrapper 对象上模拟用户事件，触发组件的相应事件处理函数。

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

it('handles click correctly', () => {
  const onClickMock = jest.fn();
  const wrapper = mount(<Button onClick={onClickMock}>Click me</Button>);
  wrapper.simulate('click');
  expect(onClickMock).toHaveBeenCalledTimes(1);
});

三、实例教学

以下是一个简单的 Counter 组件，用于展示 Enzyme 的基本使用方法：

// javascriptcn.com 代码示例
import React, {useState} from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Counter</h1>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default Counter;

我们可以编写以下测试用例：

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

describe('<Counter />', () => {
  const wrapper = shallow(<Counter />);

  it('renders without crashing', () => {
    expect(wrapper.exists()).toBeTruthy();
  });

  it('increments count when the + button is clicked', () => {
    expect(wrapper.find('p').text()).toEqual('0'); // 初始值为 0
    wrapper.find('button').at(0).simulate('click');
    expect(wrapper.find('p').text()).toEqual('1');
  });

  it('decrements count when the - button is clicked', () => {
    expect(wrapper.find('p').text()).toEqual('1'); // +1 后值为 1
    wrapper.find('button').at(1).simulate('click');
    expect(wrapper.find('p').text()).toEqual('0');
  });
});

四、总结

Enzyme 是一个非常有用的 React 组件测试工具，它可以帮助我们实现自动化测试，提高代码的质量和可靠性。在使用 Enzyme 时，我们需要先安装和配置工具的依赖，并学习常用的 API，包括 mount()、shallow()、render()、find()、contains() 和 simulate() 等。最后，我们可以通过一个简单的示例了解 Enzyme 的基本使用方法。

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