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

React 是一款流行的前端框架，它使用组件化的思想来构建用户界面。在 React 应用中，组件是最基本的构建单元。因此，对组件的测试非常重要。在本文中，我们将介绍如何使用 Enzyme 进行 React 组件测试。

什么是 Enzyme？

Enzyme 是一个 React 组件测试工具，它由 Airbnb 开发并维护。它提供了一组简单易用的 API，可以帮助我们在测试中操作和检查组件的状态和行为。

Enzyme 支持三种渲染方式：浅渲染、静态渲染和完整渲染。浅渲染只渲染当前组件，不渲染子组件；静态渲染渲染当前组件及其子组件，但不执行生命周期方法；完整渲染渲染当前组件及其子组件，并执行生命周期方法。根据不同的测试需求，我们可以选择不同的渲染方式。

安装和配置 Enzyme

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

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

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

安装完成后，我们需要在测试文件中配置 Enzyme。在 src/setupTests.js 文件中添加以下代码：

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

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

现在，我们就可以在测试文件中使用 Enzyme 了。

使用 Enzyme 进行测试

浅渲染

浅渲染是一种快速测试组件的方式，它只渲染当前组件，不渲染子组件。我们可以使用 shallow 方法进行浅渲染。

下面是一个简单的组件 Button：

import React from 'react';

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

export default Button;

我们可以使用 Enzyme 的 shallow 方法测试这个组件：

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

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Button label="Click me" />);
    expect(wrapper).toMatchSnapshot();
  });

  it('calls onClick when button is clicked', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<Button label="Click me" onClick={onClick} />);
    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

在第一个测试中，我们使用 shallow 方法渲染 Button 组件，并使用 toMatchSnapshot 方法验证渲染结果是否与快照匹配。toMatchSnapshot 方法会生成一个快照文件，用于比较组件渲染结果的变化。如果组件渲染结果与快照不一致，测试将失败。

在第二个测试中，我们使用 shallow 方法渲染 Button 组件，并模拟按钮点击事件，验证 onClick 方法是否被调用。

静态渲染

静态渲染是一种测试组件及其子组件的方式，它渲染当前组件及其子组件，但不执行生命周期方法。我们可以使用 render 方法进行静态渲染。

下面是一个包含子组件的组件 Counter：

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

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <Button label="+" onClick={this.handleIncrement} />
        <Button label="-" onClick={this.handleDecrement} />
      </div>
    );
  }
}

export default Counter;

我们可以使用 Enzyme 的 render 方法测试这个组件：

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

describe('Counter', () => {
  it('renders correctly', () => {
    const wrapper = render(<Counter />);
    expect(wrapper).toMatchSnapshot();
  });

  it('increments count when + button is clicked', () => {
    const wrapper = render(<Counter />);
    wrapper.find('button').first().simulate('click');
    expect(wrapper.find('span').text()).toBe('1');
  });

  it('decrements count when - button is clicked', () => {
    const wrapper = render(<Counter />);
    wrapper.find('button').last().simulate('click');
    expect(wrapper.find('span').text()).toBe('-1');
  });
});

在第一个测试中，我们使用 render 方法渲染 Counter 组件，并使用 toMatchSnapshot 方法验证渲染结果是否与快照匹配。

在第二个测试中，我们使用 render 方法渲染 Counter 组件，并模拟 + 按钮点击事件，验证 count 是否增加。

在第三个测试中，我们使用 render 方法渲染 Counter 组件，并模拟 - 按钮点击事件，验证 count 是否减少。

完整渲染

完整渲染是一种测试组件及其子组件的方式，它渲染当前组件及其子组件，并执行生命周期方法。我们可以使用 mount 方法进行完整渲染。

下面是一个包含表单的组件 LoginForm：

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

class LoginForm extends React.Component {
  state = {
    username: '',
    password: '',
  };

  handleUsernameChange = event => {
    this.setState({ username: event.target.value });
  };

  handlePasswordChange = event => {
    this.setState({ password: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    // Submit form data
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
        </label>
        <label>
          Password:
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default LoginForm;

我们可以使用 Enzyme 的 mount 方法测试这个组件：

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

describe('LoginForm', () => {
  it('renders correctly', () => {
    const wrapper = mount(<LoginForm />);
    expect(wrapper).toMatchSnapshot();
  });

  it('updates username state when input value changes', () => {
    const wrapper = mount(<LoginForm />);
    const usernameInput = wrapper.find('input').first();
    usernameInput.simulate('change', { target: { value: 'test' } });
    expect(wrapper.state('username')).toBe('test');
  });

  it('updates password state when input value changes', () => {
    const wrapper = mount(<LoginForm />);
    const passwordInput = wrapper.find('input').last();
    passwordInput.simulate('change', { target: { value: 'test' } });
    expect(wrapper.state('password')).toBe('test');
  });

  it('calls handleSubmit when form is submitted', () => {
    const handleSubmit = jest.fn();
    const wrapper = mount(<LoginForm onSubmit={handleSubmit} />);
    wrapper.find('form').simulate('submit');
    expect(handleSubmit).toHaveBeenCalled();
  });
});

在第一个测试中，我们使用 mount 方法渲染 LoginForm 组件，并使用 toMatchSnapshot 方法验证渲染结果是否与快照匹配。

在第二个测试中，我们使用 mount 方法渲染 LoginForm 组件，并模拟用户名输入框输入事件，验证 username 是否更新。

在第三个测试中，我们使用 mount 方法渲染 LoginForm 组件，并模拟密码输入框输入事件，验证 password 是否更新。

在第四个测试中，我们使用 mount 方法渲染 LoginForm 组件，并模拟表单提交事件，验证 handleSubmit 方法是否被调用。

总结

Enzyme 是一个非常方便的 React 组件测试工具，它提供了简单易用的 API，可以帮助我们在测试中操作和检查组件的状态和行为。在使用 Enzyme 进行测试时，我们可以根据不同的测试需求选择不同的渲染方式。

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