在 Jest 测试 React 应用时如何使用无状态组件

在 React 中，除了有状态组件，还有无状态组件，通常用于纯展示组件，不需要管理任何状态。在 Jest 测试 React 应用时，使用无状态组件可以简化测试，提升效率。本文将介绍在 Jest 中如何使用无状态组件进行测试。

什么是无状态组件

无状态组件，也叫做函数组件，是指只接收 props 作为参数，不需要声明 state，通常用于展示数据。无状态组件不需要继承 React.Component 类，而是以普通函数的形式实现：

function MyComponent(props) {
  return <div>{props.item}</div>;
}

相比有状态组件，无状态组件简单、易于维护，因为没有组件状态。但它也有一些不足之处，比如不支持许多生命周期方法，无法管理组件状态等。

Jest 测试无状态组件

在 Jest 中，我们可以使用 shallow 方法来测试无状态组件。shallow 方法可以将组件渲染为虚拟 DOM，但只渲染一层，不渲染子组件。这样，我们就可以仅仅测试当前组件，而不必深入测试子组件。

下面是一个无状态组件的例子：

function MyComponent(props) {
  return <div>{props.item}</div>;
}

我们可以使用 shallow 方法来测试它：

import { shallow } from 'enzyme';

it('renders item correctly', () => {
  const wrapper = shallow(<MyComponent item="test" />);
  expect(wrapper.find('div').text()).toEqual('test');
});

在这个例子中，我们渲染了一个 MyComponent 组件，并传递了一个 item 属性。然后我们使用 find 方法查找 div 元素，并使用 toEqual 方法检查该元素的文本是否等于传递的 item 属性。

注意，由于无状态组件不需要实例化，我们可以直接使用 shallow 方法进行测试，不需要创建实例。

使用显式返回

虽然无状态组件支持隐式返回值，但在测试时，建议使用显式返回，因为它更容易进行测试。

下面是一个使用显式返回的无状态组件：

function MyComponent(props) {
  return (
    <div className={props.className}>
      <span>{props.item}</span>
    </div>
  );
}

我们可以使用 shallow 方法测试它：

it('renders item and className correctly', () => {
  const wrapper = shallow(<MyComponent className="test-class" item="test" />);
  expect(wrapper.find('div.test-class span').text()).toEqual('test');
});

在这个例子中，我们传递了 className 和 item 属性，并在测试中检查它们是否正确渲染到组件中。

结论

无状态组件是 React 中的一种轻量级组件，通常用于纯展示组件。在 Jest 测试中，我们可以使用 shallow 方法来测试无状态组件。无状态组件不需要实例化，因此测试起来更加简单和高效。

下面是一个完整的测试用例：

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

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

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

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