使用 Enzyme 测试 React 组件中的多个事件-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 是 React 的一款测试工具，它可以方便地模拟组件的渲染过程，以便我们进行有效的测试。本文将介绍如何使用 Enzyme 来测试 React 组件中的多个事件，包括事件绑定、触发、数据验证等。

准备工作

在使用 Enzyme 进行测试之前，需要先安装相关的库和插件。首先，在我们的 React 项目中安装 Enzyme：

npm install enzyme --save-dev

然后，根据 React 的版本，安装 Enzyme 适配器。这里以 React 16 为例，安装对应的适配器：

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

在进行测试之前，还需要在测试文件中引入 Enzyme 和适配器：

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

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

测试事件绑定

以下是一个基本的 React 组件，它包含两个按钮和一个计数器：

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

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

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

export default Counter;

我们可以使用 Enzyme 的 mount 函数来渲染这个组件：

const wrapper = mount(<Counter />);

现在，我们想要测试这两个按钮的点击事件是否被正确绑定了。我们可以使用 simulate 方法来模拟点击事件，并检查计数器是否更新了。以下是测试代码：

// javascriptcn.com 代码示例
it('Should increase count when + button is clicked', () => {
  const incButton = wrapper.find('button').at(0);
  const countText = wrapper.find('p');

  expect(countText.text()).toEqual('Count: 0');
  incButton.simulate('click');
  expect(countText.text()).toEqual('Count: 1');
});

it('Should decrease count when - button is clicked', () => {
  const decButton = wrapper.find('button').at(1);
  const countText = wrapper.find('p');

  expect(countText.text()).toEqual('Count: 1');
  decButton.simulate('click');
  expect(countText.text()).toEqual('Count: 0');
});

通过 wrapper.find 方法，我们可以找到两个按钮并分别对它们进行模拟点击，在期望结果的断言中，我们检查计数器是否更新正确。

测试事件触发

除了测试事件绑定之外，我们还可以使用 Enzyme 来测试事件的触发。例如，以下是一个带有表单的组件：

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

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default Form;

我们可以使用 mount 函数来渲染这个组件：

const wrapper = mount(<Form />);

现在，我们想要测试当表单被提交时，handleSubmit 函数是否被正确触发。为了模拟表单提交，我们可以调用 simulate 方法并传递一个 submit 事件：

// javascriptcn.com 代码示例
it('Should call handleSubmit function when form is submitted', () => {
  const handleSubmit = jest.fn();
  const form = wrapper.find('form');

  wrapper.find('input[type="text"]').simulate('change', { target: { value: 'John' } });
  wrapper.find('input[type="email"]').simulate('change', { target: { value: 'john@example.com' } });
  form.simulate('submit', { preventDefault: () => {} });

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

在测试中，我们首先使用 jest.fn() 创建一个模拟的 handleSubmit 函数。然后，我们模拟输入表单的值并模拟提交事件。在 handleSubmit 函数中，我们使用 console.log 来输出表单数据。但是，由于 console.log 不能在测试代码中被测试，因此我们只需要检查 handleSubmit 函数是否被正确调用即可。

测试事件验证

在组件中，事件绑定和触发可能会导致状态的改变，我们可以使用 Enzyme 来测试状态是否被正确更新。例如，以下是一个带有模态框的组件：

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

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [message, setMessage] = useState('');

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
    setMessage('');
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setMessage('Thank you!');
  };

  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>
      {isOpen && (
        <div>
          <form onSubmit={handleSubmit}>
            <h3>Enter your name:</h3>
            <input type="text" onChange={(e) => setMessage(e.target.value)} />
            <button type="submit">Submit</button>
            <button onClick={handleClose}>Cancel</button>
          </form>
          {message && <p>{message}</p>}
        </div>
      )}
    </div>
  );
};

export default Modal;

我们可以使用 mount 函数来渲染这个组件：

const wrapper = mount(<Modal />);

现在，我们想要测试当按钮和表单被点击时，状态是否被正确更新。我们可以使用 wrapper.update() 方法来更新组件，然后使用 wrapper.find 方法和 expect 断言来检查状态是否被更新。以下是测试代码：

// javascriptcn.com 代码示例
it('Should update isOpen state when "Open Modal" button is clicked', () => {
  const openButton = wrapper.find('button').at(0);

  expect(wrapper.find('form')).toHaveLength(0);
  openButton.simulate('click');
  wrapper.update();
  expect(wrapper.find('form')).toHaveLength(1);
  expect(wrapper.find('input')).toHaveLength(1);
});

it('Should update message state when form is submitted', () => {
  const openButton = wrapper.find('button').at(0);
  const submitButton = wrapper.find('button[type="submit"]');
  const input = wrapper.find('input');

  openButton.simulate('click');
  input.simulate('change', { target: { value: 'John' } });
  submitButton.simulate('submit');
  wrapper.update();
  expect(wrapper.find('p').text()).toEqual('Thank you!');
});

it('Should update isOpen and message state when "Cancel" button is clicked', () => {
  const openButton = wrapper.find('button').at(0);
  const cancelButton = wrapper.find('button').at(1);

  openButton.simulate('click');
  cancelButton.simulate('click');
  wrapper.update();
  expect(wrapper.find('form')).toHaveLength(0);
  expect(wrapper.find('p')).toHaveLength(0);
});

在测试中，我们模拟第一个按钮的点击事件，检查是否正确显示表单。然后，我们模拟在输入框中输入文本并提交表单，检查状态是否被正确更新。最后，我们模拟第二个按钮的点击事件，检查是否关闭了模态框并清除了状态。

总结

通过 Enzyme，我们可以方便地测试 React 组件中的多个事件，包括事件绑定、触发和数据验证。通过以上示例，我们不仅学习了 Enzyme 的基本用法，还了解了测试的重要性和方法。希望这篇文章可以帮助你更好地应用 Enzyme 进行测试，提高代码质量和稳定性。

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