Enzyme 如何测试动态添加删除子组件的 React 组件-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 如何测试动态添加删除子组件的 React 组件

React 组件是前端开发中重要的一部分，而测试 React 组件则是保证代码质量的关键。Enzyme 是 React 组件测试中常用的库之一，使用它可以方便地模拟 React 组件的渲染过程。本文将介绍如何使用 Enzyme 测试动态添加删除子组件的 React 组件。

安装 Enzyme

在开始使用 Enzyme 之前，需要先安装它。可以选择使用 npm 安装：

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

Enzyme 需要依赖 enzyme-adapter-react-16，因此也需要进行安装。安装完成后，就可以在测试文件中引入 Enzyme：

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

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

编写测试用例

接下来，我们将编写测试用例。假设有一个组件 AddRemoveItems，它包含一个添加按钮和一个删除按钮。每次点击添加按钮时，就会动态添加一个子组件 Item，包含一个文本框和一个删除按钮。

首先，让我们来测试添加子组件的功能。我们可以通过 Enzyme 模拟点击按钮，并判断子组件是否成功添加。下面是测试用例的代码：

import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import AddRemoveItems from './AddRemoveItems';

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

describe('AddRemoveItems', () => {
  it('should add a new item when click the add button', () => {
    const wrapper = mount(<AddRemoveItems />);
    const addButton = wrapper.find('button[data-testid="addItem"]');
    addButton.simulate('click');
    expect(wrapper.find('div[data-testid="item"]').length).toEqual(1);
  });
});

首先，我们使用 mount 函数渲染了 AddRemoveItems 组件。然后，我们找到了添加按钮，模拟了一次点击。最后，我们断言页面上是否存在一个子组件 Item。

接下来，我们来测试删除子组件的功能。我们可以使用 setState 函数模拟删除，然后断言是否成功删除。下面是测试用例的代码：

import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import AddRemoveItems from './AddRemoveItems';

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

describe('AddRemoveItems', () => {
  it('should remove a item when click the remove button', () => {
    const wrapper = mount(<AddRemoveItems />);
    const addButton = wrapper.find('button[data-testid="addItem"]');
    addButton.simulate('click');
    const removeButton = wrapper.find('button[data-testid="removeItem"]');
    removeButton.simulate('click');
    expect(wrapper.find('div[data-testid="item"]').length).toEqual(0);
  });
});

这个测试用例与上个测试用例的代码非常相似。我们首先找到添加按钮并模拟点击，然后找到删除按钮并模拟点击。最后，我们断言是否存在子组件 Item。

编写组件代码

最后，让我们来编写 AddRemoveItems 组件的代码。下面是示例代码：

import React, { useState } from 'react';

export default function AddRemoveItems() {
  const [items, setItems] = useState([]);

  function addItem() {
    setItems([...items, { id: items.length }]);
  }

  function removeItem(id) {
    setItems(items.filter(item => item.id !== id));
  }

  return (
    <div>
      <button data-testid="addItem" onClick={addItem}>Add Item</button>
      {items.map(item => (
        <div key={item.id} data-testid="item">
          <input />
          <button data-testid="removeItem" onClick={() => removeItem(item.id)}>Remove Item</button>
        </div>
      ))}
    </div>
  );
}

AddRemoveItems 组件使用了 useState 钩子函数来管理子组件的状态。当点击添加按钮时，将新的子组件添加到 items 数组中，并通过 setItems 函数更新状态。当点击删除按钮时，使用 filter 函数过滤掉需要删除的子组件。

总结

本文介绍了如何使用 Enzyme 测试动态添加删除子组件的 React 组件。我们使用 Enzyme 模拟了点击按钮，然后通过断言页面上是否存在子组件，验证了添加和删除的功能是否成功。代码实现上，我们使用了 useState 钩子函数来管理子组件的状态。希望本文能对你了解 Enzyme 的使用以及 React 组件测试有所帮助。

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