在 Jest 中使用 Enzyme 测试 React 组件

简介

React 是一个非常流行的前端框架，它能让我们很方便地构建复杂的单页应用。而 Enzyme 是一个测试 React 组件的框架，可以模拟渲染出来的组件进行测试。今天我们将探讨如何在 Jest 中使用 Enzyme 进行 React 组件的测试。

安装

首先，我们需要在项目中安装 enzyme 和 enzyme-adapter-react-16 。在控制台中执行以下命令：

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

接着，我们还需要在 setupTests.js 文件中配置 Enzyme:

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

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

测试

首先我们需要在测试文件中引入 React、Enzyme，以及我们要测试的组件。在本文中，我们将测试一个简单的组件：

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

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

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

下面我们将编写这个组件的测试文件。测试的流程如下：

1. 渲染组件；
2. 查找组件中的元素；
3. 对元素进行交互或改变状态；
4. 断言元素或状态发生了预期的变化。

测试渲染

我们首先测试是否能正确渲染：

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

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

在这个测试里，我们用 shallow 方法来渲染组件，并确保它没有崩溃。

测试元素

接下来，我们想测试组件中是否存在一个特定的元素。我们可以使用 find 方法来查找元素：

describe('My Component', () => {
  it('renders a hello message', () => {
    const wrapper = shallow(<MyComponent name="world" />);
    const welcome = <h1>Hello, world!</h1>;
    expect(wrapper.contains(welcome)).toEqual(true);
  });
});

在这个测试中，我们用 shallow 方法渲染了组件，并通过 contains 方法来断言是否存在预期的元素。

测试状态

有些组件具有状态，我们还需要测试组件的状态是否如预期那样改变。我们可以在测试中手动触发组件事件并检查状态是否发生了预期的变化：

describe('My Component', () => {
  it('updates the name when clicking the button', () => {
    const wrapper = shallow(<MyComponent name="world" />);
    const button = wrapper.find('button');
    button.simulate('click');
    expect(wrapper.contains( <h1>Hello, React!</h1>)).toEqual(true);
  });
});

结论

使用 Enzyme 可以让我们更轻松地测试 React 组件。在 Jest 中使用 Enzyme 进行 React 组件的测试需要经过如上的步骤，但并不复杂。掌握了这些知识，我们就可以更好地保证 React 应用的质量。

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