随着前端应用程序越来越复杂，测试变得越来越重要。在 React 应用程序中使用 Jest 进行测试是一种非常受欢迎的做法。在本文中，我们将探讨如何使用 Jest 和 Enzyme 来编写测试，并为您提供示例代码。
准备工作
在开始编写测试之前，我们需要安装 Jest 和 Enzyme。我们可以使用 npm 来处理这些依赖项：
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16 react-test-renderer
在安装完依赖项后，我们需要配置 Jest。我们需要创建一个 jest.config.js 文件，并在其中添加以下配置:
-- -------------------- ---- -------
-------------- - -
---------- ------------------------------- ----------------------------------
------------------- --------------------------------
----------------- -
--------------------------- ---------------------
---------------------------- -------------------------------------------
--
-------- ----
--在 .babelrc 文件中设置 Babel，以支持 ES6 和 React:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}Enzyme 需要一个适配器，它允许我们使用 React 16+ 中的新 API，我们需要在 src/setupTests.js 文件中设置它 / 导入它:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });我们还需要在 package.json 文件中添加以下命令：
"scripts": {
"test": "jest --config=jest.config.js",
},这样我们就准备好了通过 Jest 进行测试了。
编写测试
快照测试
快照测试是一种非常快速的测试，它会将 React 组件渲染成一份 HTML 代码，并将其与以前保存的快照进行比较。如果这两个快照不同，测试就会失败。
我们首先需要编写一个简单的 React 组件，以便进行快照测试:
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- -- -
-----
------ --------------
------- -- - ------ --------------
------
--
------ ------- ------------接下来，我们编写一个快照测试，以测试组件是否正确显示:
import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';
test('renders correctly', () => {
const tree = renderer.create(<MyComponent />).toJSON();
expect(tree).toMatchSnapshot();
});在运行测试后，将在您的项目中创建一个名为 __snapshots__ 的文件夹，并在其中包含一个名为 MyComponent.test.js.snap 的文件。这个文件包括 MyComponent 的快照。如果以后对组件进行更改，Jest 会将其与以前的快照进行比较，并通知您需要更新快照。
组件测试
组件测试是更细粒度的测试。它们允许我们测试组件的每个方面，包括它的状态，它的 props，以及它如何响应在它上下文中更改的事件。我们将编写一个测试，以测试组件是否能够在点击按钮时更改它的状态:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
--------------------------------------------- ------------
---
----------- --- ----- ----------- -- -- -
----- ------- - -------------------- ----
-------------------------------------------------
-----------------------------------------
------------------------------------------------
---
---在这个测试中，我们首先浅渲染组件，然后查找渲染的 HTML 中的元素, 并测试它们是否正确显示。接下来，我们模拟按钮的点击事件，并断言状态是否正确更改。
使用 Enzyme，我们可以测试组件的其他方面，例如使用 props() 来测试组件是否正确处理 props。
总结
Jest 能够为复杂的 React 应用程序提供单元和集成测试，它可以运行在 Node.js 和浏览器中。使用 Jest 时，我们可以编写快照测试和组件测试。快照测试可以很好地帮助我们快速测试应用程序，并确保它们按预期显示。组件测试允许我们更细粒度地测试组件，并确保它们可以正确地响应用户的操作。我们希望这篇文章能帮助您开始使用 Jest 编写测试，从而改进您的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649569ed48841e9894299fe6