如何使用 Enzyme 和 Jest 进行 React 组件测试-JavaScript中文网-JavaScript教程资源分享门户

React 是现代 web app 开发中最流行的 JavaScript 库之一。而为了确保这些 React 组件能够在各种用户环境下运行良好，为了提高代码质量和可维护性，我们需要对这些组件进行严格测试。在本文中，我们将介绍如何使用 Enzyme 和 Jest 进行 React 组件测试。

Enzyme 简介

Enzyme 是 Airbnb 开源的一个 React 组件测试工具。它提供了一个简单而强大的 API，可以帮助我们进行 React 组件测试。它支持模拟渲染、挂载渲染和静态渲染，可以测试组件的生命周期方法、事件处理、更新和异步行为等。

Jest 简介

Jest 是 Facebook 开源的一个 JavaScript 测试框架。它提供了一些强大而易于使用的工具用于编写和运行测试，如断言、mock、snapshots 等。它与 React 配合得很好，也是 React 官方推荐的测试框架。

安装 Enzyme 和 Jest

首先，我们需要确保在项目中安装了 React、React-DOM 和 Enzyme。可以通过以下命令来安装它们：

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

然后，我们需要引入 Jest，可以通过以下命令来安装：

npm install jest --save-dev

编写一个测试

在开始编写测试之前，我们需要为 Enzyme 设置适配器。这里我们选择适配 React 16 版本。在测试文件的顶部添加以下代码：

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

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

现在，我们可以开始编写测试了。我们将编写一个简单的测试，检查一个计数器组件是否正确地递增和递减。首先，我们需要编写一个测试，测试计数器组件是否能够被正确地渲染：

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

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

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

在这个测试中，我们使用 Enzyme 的 shallow 方法来渲染计数器组件，并使用 expect 断言来验证组件是否被渲染成功。

接下来，我们编写测试，测试计数器组件是否能够正确地递增：

it('should increase count when clicking the plus button', () => {
  const wrapper = shallow(<Counter />);
  const plusButton = wrapper.find('button[data-test="plusButton"]');
  plusButton.simulate('click');
  expect(wrapper.state().count).toEqual(1);
});

在这个测试中，我们使用 find 方法来查找“data-test='plusButton'”的 button 元素，并使用 simulate 方法来模拟点击按钮。然后，我们使用 expect 断言来验证计数器的状态是否得到了正确的更新。

最后，我们编写测试，测试计数器组件是否能够正确地递减：

it('should decrease count when clicking the minus button', () => {
  const wrapper = shallow(<Counter />);
  const minusButton = wrapper.find('button[data-test="minusButton"]');
  minusButton.simulate('click');
  expect(wrapper.state().count).toEqual(-1);
});

在这个测试中，我们通过 find 方法来找到“data-test='minusButton'”的 button 元素，并使用 simulate 方法来模拟点击按钮。然后，我们使用 expect 断言来验证计数器的状态是否得到了正确的更新。

运行测试

现在，我们已经编写了一个简单的测试。我们可以使用 Jest 来运行它。在 package.json 文件中添加以下代码：

{
  "scripts": {
    "test": "jest"
  }
}

然后，在命令行中运行 npm run test 命令。jest 将在测试运行后输出输出测试结果。

结论

在本文中，我们介绍了如何使用 Enzyme 和 Jest 对 React 组件进行测试。通过这些工具，我们可以编写高质量的测试，确保我们的应用在任何环境下都能良好运行。希望这篇文章可以帮助你更好地理解 React 组件测试的工作原理，并且能够让你的 React 开发更加高效。

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