React 组件测试攻略之 Enzyme 入门-JavaScript中文网-JavaScript教程资源分享门户

React 组件测试是前端开发中不可或缺的一部分，它可以保证代码的质量和稳定性。Enzyme 是 React 组件测试中常用的工具之一，它提供了一系列 API，可以方便地对 React 组件进行测试。本文将介绍 Enzyme 的基本使用方法和常用 API，帮助读者快速入门。

Enzyme 简介

Enzyme 是由 Airbnb 开源的一个 React 组件测试工具，它提供了一系列 API，可以方便地对 React 组件进行测试。Enzyme 支持三种渲染方式：浅渲染（Shallow Rendering）、静态渲染（Static Rendering）和全渲染（Full Rendering）。其中，浅渲染只渲染当前组件而不渲染其子组件，静态渲染和全渲染则会渲染当前组件及其子组件。Enzyme 还提供了一些常用的 API，如查找元素、模拟事件、获取组件状态等。

安装 Enzyme

要使用 Enzyme，需要先安装它。可以通过 npm 安装 Enzyme：

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

其中，enzyme-adapter-react-16 是 Enzyme 适配 React 16 的适配器，如果使用其他版本的 React，可以选择对应的适配器。

浅渲染

浅渲染只渲染当前组件而不渲染其子组件，可以用 shallow 方法实现。下面是一个例子：

// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <span className="name">{this.props.name}</span>
        <button onClick={this.props.onClick}>Click Me</button>
      </div>
    );
  }
}

describe('MyComponent', () => {
  it('should render name', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper.find('.name').text()).toEqual('John');
  });

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

上面的代码中，我们定义了一个 MyComponent 组件，它接受一个 name 属性和一个 onClick 属性。我们使用 shallow 方法对这个组件进行浅渲染，然后使用 find 方法查找组件中的元素，使用 simulate 方法模拟事件，并使用 expect 断言进行测试。

静态渲染

静态渲染会渲染当前组件及其子组件，但不会执行组件的生命周期方法，可以用 render 方法实现。下面是一个例子：

// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <span className="name">{this.props.name}</span>
        <button onClick={this.props.onClick}>Click Me</button>
      </div>
    );
  }
}

describe('MyComponent', () => {
  it('should render name', () => {
    const wrapper = render(<MyComponent name="John" />);
    expect(wrapper.find('.name').text()).toEqual('John');
  });

  it('should call onClick', () => {
    const onClick = jest.fn();
    const wrapper = render(<MyComponent onClick={onClick} />);
    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

上面的代码中，我们使用 render 方法对 MyComponent 进行静态渲染，然后使用 find 方法查找组件中的元素，使用 simulate 方法模拟事件，并使用 expect 断言进行测试。

全渲染

全渲染会渲染当前组件及其子组件，并执行组件的生命周期方法，可以用 mount 方法实现。下面是一个例子：

// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <span className="name">{this.props.name}</span>
        <button onClick={this.handleClick}>Click Me</button>
        <span className="count">{this.state.count}</span>
      </div>
    );
  }
}

describe('MyComponent', () => {
  it('should render name', () => {
    const wrapper = mount(<MyComponent name="John" />);
    expect(wrapper.find('.name').text()).toEqual('John');
  });

  it('should increase count', () => {
    const wrapper = mount(<MyComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find('.count').text()).toEqual('1');
  });
});

上面的代码中，我们使用 mount 方法对 MyComponent 进行全渲染，然后使用 find 方法查找组件中的元素，使用 simulate 方法模拟事件，并使用 expect 断言进行测试。

常用 API

Enzyme 还提供了一些常用的 API，如查找元素、模拟事件、获取组件状态等。下面是一些例子：

// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <span className="name">{this.props.name}</span>
        <button className="btn" onClick={this.handleClick}>Click Me</button>
        <span className="count">{this.state.count}</span>
      </div>
    );
  }
}

describe('MyComponent', () => {
  it('should find elements', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper.find('.name').text()).toEqual('John');
    expect(wrapper.find('.btn')).toHaveLength(1);
    expect(wrapper.find('.count').text()).toEqual('0');
  });

  it('should simulate events', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<MyComponent onClick={onClick} />);
    wrapper.find('.btn').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });

  it('should get state', () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper.state('count')).toEqual(0);
    wrapper.find('.btn').simulate('click');
    expect(wrapper.state('count')).toEqual(1);
  });
});

上面的代码中，我们使用了 find 方法查找元素，使用 simulate 方法模拟事件，使用 state 方法获取组件状态，并使用 expect 断言进行测试。

总结

Enzyme 是 React 组件测试中常用的工具之一，它提供了一系列 API，可以方便地对 React 组件进行测试。本文介绍了 Enzyme 的基本使用方法和常用 API，希望能够帮助读者快速入门。在实际使用中，还需要根据具体情况选择合适的渲染方式和 API，保证测试的准确性和效率。

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