基于 Enzyme 的 React 组件测试实践指南-JavaScript中文网-JavaScript教程资源分享门户

React 组件是现代前端开发中不可或缺的一部分，而对组件进行测试则是保证其质量和稳定性的重要手段。Enzyme 是一款流行的 React 组件测试工具，它提供了一系列 API 用于模拟组件行为、查询 DOM 元素和断言组件状态。本文将介绍 Enzyme 的基本使用方法和一些实践经验，帮助读者更好地编写 React 组件测试。

安装和配置 Enzyme

在使用 Enzyme 之前，需要先安装它和相应的适配器。Enzyme 支持三种适配器：enzyme-adapter-react-16、enzyme-adapter-react-17 和 enzyme-adapter-react-18，分别对应 React 的三个主要版本。选择适合自己项目的适配器并安装：

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

然后，在测试文件中引入 Enzyme 和适配器，并配置它们：

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

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

现在就可以开始编写测试用例了。

测试组件行为

Enzyme 提供了一系列 API 用于模拟组件行为和查询 DOM 元素。例如，shallow 方法可以创建一个浅渲染的组件实例，不渲染子组件，只渲染当前组件的内容。mount 方法则会渲染整个组件树，并触发生命周期方法。

考虑以下的计数器组件：

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

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  function handleDecrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

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

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

describe('Counter', () => {
  it('renders count', () => {
    const wrapper = shallow(<Counter />);
    expect(wrapper.find('h1').text()).toEqual('Count: 0');
  });

  it('increments count', () => {
    const wrapper = shallow(<Counter />);
    wrapper.find('button').at(0).simulate('click');
    expect(wrapper.find('h1').text()).toEqual('Count: 1');
  });

  it('decrements count', () => {
    const wrapper = shallow(<Counter />);
    wrapper.find('button').at(1).simulate('click');
    expect(wrapper.find('h1').text()).toEqual('Count: -1');
  });
});

第一个测试用例检查组件是否正确渲染了计数器的初始状态。第二个和第三个测试用例分别检查了增加和减少计数器的行为是否正确。

断言组件状态

除了模拟组件行为外，Enzyme 还提供了一些 API 用于查询组件状态。例如，state 方法可以获取组件的当前状态，props 方法可以获取组件的属性，instance 方法可以获取组件实例。这些方法可以帮助我们断言组件的正确性。

考虑以下的登录表单组件：

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

export default function LoginForm({ onSubmit }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    onSubmit({ username, password });
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input id="username" type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

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

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

describe('LoginForm', () => {
  it('submits with correct data', () => {
    const handleSubmit = jest.fn();
    const wrapper = shallow(<LoginForm onSubmit={handleSubmit} />);
    wrapper.find('#username').simulate('change', { target: { value: 'john' } });
    wrapper.find('#password').simulate('change', { target: { value: '123456' } });
    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
    expect(handleSubmit).toHaveBeenCalledWith({ username: 'john', password: '123456' });
  });

  it('resets form on submit', () => {
    const wrapper = shallow(<LoginForm onSubmit={() => {}} />);
    wrapper.find('#username').simulate('change', { target: { value: 'john' } });
    wrapper.find('#password').simulate('change', { target: { value: '123456' } });
    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
    expect(wrapper.find('#username').props().value).toEqual('');
    expect(wrapper.find('#password').props().value).toEqual('');
  });
});

第一个测试用例模拟用户输入用户名和密码，然后模拟提交表单，并断言回调函数是否被正确调用。第二个测试用例检查表单是否在提交后被重置了。

总结

Enzyme 是一款强大的 React 组件测试工具，可以帮助我们编写高质量、稳定的组件。在使用 Enzyme 时，我们需要先安装和配置适配器，然后使用 Enzyme 的 API 模拟组件行为、查询组件状态，并断言组件的正确性。通过实践和经验总结，我们可以更好地编写 React 组件测试，提高项目的质量和稳定性。

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