如何用 Enzyme 测试 React 中的自定义 Hooks

自定义 Hooks 是 React 中非常方便的技术，能够将组件内的逻辑从视图层中分离处理，同时也可以方便地重复使用。但是，在使用自定义 Hooks 时，我们需要测试该 Hook 是否符合预期，而 Enzyme 是一款使用方便，功能强大的测试工具，能够为我们提供一种高效的自定义 Hooks 测试方式。

Enzyme 是什么？

Enzyme 是由 Airbnb 提供的一款 React 测试工具，能够模拟组件的渲染和交互行为，提供了一系列断言 API 和便捷的函数来对组件进行测试。Enzyme 的最新版本支持 React 16.x 及以上版本。

使用 Enzyme 测试自定义 Hooks

在使用 Enzyme 测试自定义 Hooks 之前，需要先安装 Enzyme 和相应的依赖库。

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

然后，需要在 Jest 配置文件中指定使用的 Adapter：

// jest.config.js
{
  "setupFilesAfterEnv": ["jest-enzyme"],
  "testEnvironment": "enzyme",
  "enzymeConfig": {
    "adapter": "react-16"
  }
}

接下来，我们将测试一个简单的自定义 Hook，该 Hook 用于处理表单数据。

function useForm(initialState) {
  const [formData, setFormData] = useState(initialState);

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return {
    handleChange,
    handleSubmit,
    formData,
  };
}

我们将测试这个 Hook，以确保该 Hook 能够正确实现表单数据的处理。

测试 handleChange 函数

我们将首先测试 handleChange 函数：

import { mount } from 'enzyme';
import React from 'react';
import useForm from './useForm';

describe('useForm', () => {
  it('should update form data', () => {
    const Component = ({ onSubmit }) => {
      const { handleChange, formData } = useForm({ name: '', email: '' });
      return (
        <form onSubmit={onSubmit}>
          <input name="name" value={formData.name} onChange={handleChange} />
          <input name="email" value={formData.email} onChange={handleChange} />
          <button type="submit">Submit</button>
        </form>
      );
    };

    const wrapper = mount(<Component />);
    const input = wrapper.find('input[name="name"]');
    input.simulate('change', { target: { name: 'name', value: 'John' } });

    expect(wrapper.find('input[name="name"]').prop('value')).toEqual('John');
  });
});

我们创建了一个 Component，该组件使用了我们的 useForm Hook，并且监听表单的 onSubmit 事件。这里我们使用了 Mount API 来进行测试，可以模拟组件的渲染，并且能够在 DOM 中找到组件的元素。在测试中，我们选择了 name 输入框，然后模拟了用户的输入。最后，我们使用 expect 断言，确保输入框的值已经被更新。

测试 handleSubmit 函数

接下来，我们将测试 handleSubmit 函数：

describe('useForm', () => {
  it('should submit form data', () => {
    const handleSubmit = jest.fn();
    const Component = () => {
      const { handleChange, handleSubmit: handleFormSubmit, formData } = useForm({
        name: '',
        email: '',
      });
      return (
        <form onSubmit={handleFormSubmit}>
          <input name="name" value={formData.name} onChange={handleChange} />
          <input name="email" value={formData.email} onChange={handleChange} />
          <button type="submit" onClick={handleSubmit}>
            Submit
          </button>
        </form>
      );
    };

    const wrapper = mount(<Component onSubmit={handleSubmit} />);
    const submitButton = wrapper.find('button[type="submit"]');
    submitButton.simulate('click', { preventDefault() {} });

    expect(handleSubmit).toHaveBeenCalledTimes(1);
  });
});

这次我们假设用户已经填好了表单，然后点击了提交按钮。我们使用了 Jest 提供的 mock function 来记录 handleSubmit 函数的调用次数，并且使用了 simulate API 来模拟点击事件。测试中，我们使用了 expect 断言来确保 handleSubmit 函数仅仅被调用了一次。

总结

通过本篇文章的学习，我们了解了如何使用 Enzyme 测试自定义 Hooks，可以快速地检查我们实现的自定义 Hook 进行功能测试，帮助我们确保代码质量。同时，配合 Jest 使用，可以让我们更加方便地进行测试，并且在写代码时更加自信。

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