Enzyme 中如何处理 React Class 组件与 Functional 组件

Enzyme 中如何处理 React Class 组件与 Functional 组件

在 React 应用程序中，我们经常需要测试组件的行为和状态。而 Enzyme 是一个非常常用的测试库，它可以帮助我们模拟组件的渲染和交互，方便我们编写可靠的测试用例，提高开发效率。但是，如何在 Enzyme 中处理 React Class 组件和 Functional 组件并不是完全相同的。下面我将详细介绍如何分别处理这两种组件类型，并附上示例代码。

处理 Class 组件

Class 组件是以 ES6 class 语法创建的组件，通常包含一个 state 和一些内部方法。在 Enzyme 中，你可以使用 shallow() 方法来渲染 Class 组件，并对其进行相关测试，比如检查组件的属性、state 和 DOM 结构等。

例如，假设我们有一个名为 MyComponent 的 Class 组件，如下所示：

-- -------------------- ---- -------
----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -

  -------- -
    ------ -
      -----
        ---------------------------
        --------- ----------------------
        ------- ----------- -- --------------- ------ ---------------- - - ----
          ----- --
        ---------
      ------
    --
  -
-

现在，我们可以使用 shallow() 方法来测试这个组件。例如，我们可以检查组件是否传递了 title 属性，如下所示：

import { shallow } from 'enzyme';

describe('MyComponent', () => {
  it('renders title', () => {
    const wrapper = shallow(<MyComponent title="Hello world" />);
    expect(wrapper.find('h1').text()).toEqual('Hello world');
  });
});

我们也可以模拟按钮点击事件，并验证组件 state 是否正确更新。例如，我们可以编写如下代码：

it('updates count on button click', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('p').text()).toEqual('Count: 0');
  wrapper.find('button').simulate('click');
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

处理 Functional 组件

Functional 组件是以函数式组件语法创建的组件，通常只关注 UI 展示，不包含 state 和内部方法。在 Enzyme 中，你可以使用 mount() 方法来渲染 Functional 组件，并对其进行相关测试，比如检查组件的属性和 DOM 结构等。

例如，假设我们有一个名为 MyComponent 的 Functional 组件，如下所示：

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>Hello world</p>
    </div>
  );
}

现在，我们可以使用 mount() 方法来测试这个组件。例如，我们可以检查组件是否传递了 title 属性，如下所示：

import { mount } from 'enzyme';

describe('MyComponent', () => {
  it('renders title', () => {
    const wrapper = mount(<MyComponent title="Hello world" />);
    expect(wrapper.find('h1').text()).toEqual('Hello world');
  });
});

我们也可以检查组件是否渲染了正确的 DOM 结构，例如：

it('renders default message', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find('p').text()).toEqual('Hello world');
});

需要注意的是，在测试 Functional 组件时，我们需要使用 mount() 方法而不是 shallow() 方法，因为 shallow() 方法只适用于 Class 组件。

总结

本文中，我们介绍了在 Enzyme 中如何分别处理 React Class 组件和 Functional 组件。对于 Class 组件，我们使用 shallow() 方法来测试，对于 Functional 组件，我们使用 mount() 方法来测试。希望这篇文章能对你有所帮助，以提高测试在前端开发中的应用。下面是完整的示例代码：

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d641548841e9894bb0a77