简介
在前端开发中，我们经常需要测试我们的代码以确保它们可以正确运行并且不会引入新的错误。Enzyme 和 Jest 是两个常用的测试工具，分别用于测试 React 组件和 JavaScript 代码。
在本文中，我们将介绍如何从零开始使用 Enzyme 和 Jest 测试 React 应用，包括安装、配置和编写测试用例。通过学习本文，你将掌握基本的测试技能，并且能够为你的 React 应用编写高质量的测试用例。
安装和配置
在开始编写测试用例之前，我们需要先安装 Enzyme 和 Jest。可以通过 npm 或 yarn 安装它们：
npm install --save-dev enzyme jest
或者
yarn add --dev enzyme jest
安装完成后，我们需要对 Jest 进行配置。在项目的根目录下创建一个 jest.config.js 文件，并添加以下内容：
module.exports = {
setupFilesAfterEnv: [
"<rootDir>/src/setupTests.js"
],
moduleNameMapper: {
"\\.(css|less)$": "identity-obj-proxy"
}
}此配置文件指定了 Jest 的一些选项，例如 setupFilesAfterEnv 将 src/setupTests.js 加载到测试环境中。我们将在这个文件中初始化 Enzyme 和 React。
接下来，我们需要创建这个 setupTests.js 文件，这个文件将被 Jest 加载到测试环境中。我们可以在这个文件中初始化 Enzyme 和 React，代码如下所示：
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });完成以上步骤后，我们就可以开始编写测试用例了。
编写测试用例
在编写测试用例之前，我们需要创建一个简单的 React 组件作为例子。这个组件将接受一个数字作为 props，然后显示一个按钮，当点击按钮时，数字将加 1。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -----------
--
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
------ -
------- ---------------------------
------------------
---------
--
-
-
------ ------- ------------接下来，我们将编写测试用例来确保该组件正常工作。
测试按钮点击事件
我们将首先测试按钮点击事件是否能够正常工作。为此，我们将安装 react-test-renderer 包，这个包允许我们可以以 JSON 格式输出渲染 React 组件的结果。在测试代码中，我们将对这个输出进行检查以确保组件行为正确。
首先，我们创建一个文件 CountButton.test.js，在测试代码中，我们将渲染出组件并且模拟点击事件，代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----- ------- -- -- -
----- --------- - ---------------------------- --------- ----
----- ---- - -------------------
-- ------
---------------------
-------------------------------------
---
---在测试代码中，我们使用 renderer.create 方法渲染出组件。我们模拟点击事件，并且期望组件显示的文字应该是 “1”。如果测试通过，则表示按钮点击事件能够正常工作。
使用 Enzyme 测试组件状态
Enzyme 提供了一些方法来测试组件的状态。我们将编写一个新的测试用例来检查 CountButton 组件是否能够正确地显示 count 属性。
首先，我们需要安装 enzyme-adapter-react-16 和 enzyme-mount 包。这些包将允许我们使用 Enzyme 测试 React 组件。
在测试代码中，我们将使用 mount 方法来渲染组件，并且使用 find 方法来查找按钮元素。代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----- ----------- -- -- -
----- --------- - ------------------ --------- ----
----- ------ - -------------------------
-----------------------------------
---
---在测试代码中，我们使用 mount 方法渲染出组件。我们使用 find 方法找到按钮元素，并且期望按钮应该显示的文字是 “1”。如果测试通过，则表示组件状态能够正常工作。
总结
通过本文的学习，我们了解了如何使用 Enzyme 和 Jest 测试 React 应用。我们学习了如何安装和配置 Enzyme 和 Jest，并且编写了两个测试用例来测试组件的行为和状态。这些测试用例不仅可以确保我们的代码正常工作，而且在重构代码时也能得到有力的支持。
总之，测试是编写高质量软件的关键步骤之一。通过学习 Enzyme 和 Jest，我们可以在 React 应用中编写高效、可靠的测试用例，从而为我们的团队带来更高的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457e069968c7c53b0a722c2