如何使用 Enzyme 和 React 测试对象

React 是一种用于用户界面构建的 JavaScript 库，它具有高效、灵活和可重用等特性。而 Enzyme 则是 React 的一个测试工具，它可以帮助前端开发和测试人员更容易地测试 React 组件和相关功能，提高产品的质量。

本文将介绍如何使用 Enzyme 和 React 进行对象测试，具体包括以下内容：

1. Enzyme 的安装和配置
2. Enzyme 组件浅层渲染测试
3. Enzyme 和 React 多个组件互动测试
4. 使用 Jest 进行组件全属性测试
5. Enzyme 与常见 UI 框架的集成测试

Enzyme 的安装和配置

第一步，我们需要安装 Enzyme。在终端输入以下命令：

npm install --save-dev enzyme react-test-renderer

接着，我们需要在代码中引入 Enzyme：

//我们需要引入一些 Enzyme 的库
import { configure, shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-17-updated';

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

引入后，我们就可以使用上述的 Enzyme 测试功能。

Enzyme 组件浅层渲染测试

Enzyme 与 React 的结合，可以进行组件浅层渲染测试、组件深层渲染测试等。以下我们以组件浅层渲染测试为示例。

首先我们要实例化要测的组件：

// javascriptcn.com 代码示例
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <button>Click Me</button>
      </div>
    );
  }
}

export default MyComponent;

接着，我们创建一个测试文件，并实例化测量组件：

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

describe('<MyComponent />', () => {
  it('正确渲染 MyComponent 组件结构', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('h1').text()).toBe('Hello World');
    expect(wrapper.find('button').text()).toBe('Click Me');
  });
});

该测试用例的含义是，我们期望在组建渲染完成后，组件的 h1 元素和 button 元素上的文本内容分别是 'Hello World' 和 'Click Me'。

Enzyme 和 React 多个组件互动测试

当我们需要测试多个组件之间的整体效果时，可以使用 Enzyme 和 React 进行多个组件互动测试。这里我们使用以下示例：

// javascriptcn.com 代码示例
import React from 'react';

const ListItem = (props) => {
  return (
    <li>{props.value}</li>
  );
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['item1', 'item2', 'item3']
    }
  }

  deleteItem(index) {
    const list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => (
            <ListItem key={index} value={item} />
          ))}
        </ul>
        <button onClick={() => (this.deleteItem(index))}>
          Delete Item
        </button>
      </div>
    );
  }
}

export default MyComponent;

该组件主要实现了一个带有删除功能的列表。

接着，我们创建一个测试用例：

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

describe('测试 MyComponent', () => {
  it('测试列表删除功能', () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper.find('li').length).toBe(3);
    
    //获取第一个 li 元素的删除按钮，通过 similate 触发 click 事件
    wrapper.find('li').first().find('button').simulate('click');
    expect(wrapper.find('li').length).toBe(2);
  });
});

该测试用例模拟了一个列表删除的动作，检测删除前后列表数量是否匹配。

使用 Jest 进行组件全属性测试

Enzyme 不仅可以测试 React 组件的结构和行为，它还可以测试全属性，比如 Props、State 和实际的 HTML DOM 结构和样式等。以下是使用 Jest 进行属性测试的示例：

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

describe('测试 MyComponent', () => {
  it('测试 Props 是否正确传递', () => {
    const wrapper = mount(<MyComponent text="test props" />);
    expect(wrapper.props().text).toEqual('test props');
  });
  
  it('测试 State 是否正确传递', () => {
    const wrapper = mount(<MyComponent />);
    wrapper.setState({ isPressed: true });
    expect(wrapper.state('isPressed')).toEqual(true);
  });
});

该测试用例测试了组件 Props 和 State 的正确性。

Enzyme 与常见 UI 框架的集成测试

最后，我们介绍 Enzyme 与常见 UI 框架的集成测试。以下是使用 Enzyme 和 Material UI 进行集成测试的示例：

// javascriptcn.com 代码示例
import { createShallow } from '@material-ui/core/test-utils';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyButton from './MyButton';

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

describe('集成测试 MyButton 和 Material UI', () => {
  let shallow;
  beforeEach(() => {
    shallow = createShallow({ dive: true });
  });

  it('测试 MyButton 能否正常响应 click 事件', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<MyButton onClick={onClick} />);
    wrapper.dive().find('button').simulate('click');
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

该测试用例展示了 Enzyme 如何与 Material UI 结合使用，并测试了按钮是否能够完成 click 事件响应。

我们可以根据实际需要，进行 Enzyme 和其他 UI 框架的集成测试。

总结

通过本文的介绍，我们了解了如何使用 Enzyme 和 React 进行对象测试，包括 Enzyme 的安装和配置、组件浅层渲染测试、多个组件互动测试、全属性测试和与常见 UI 框架的集成测试等。在实际开发和测试环节中，合理使用 Enzyme 工具可以大大提高代码质量、优化产品架构，也能节省我们不少的时间和成本。

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