如何使用 Jest 进行 React 应用中的 UI 测试？
Jest 是一种流行的 JavaScript 测试框架，可用于测试 React 应用程序中的 UI 组件。本文将介绍如何使用 Jest 对 React 应用程序的 UI 进行测试。
安装 Jest
要安装 Jest，可以使用 npm 在本地安装它。运行以下代码：
npm install --save-dev jest
安装完成后，您需要在项目中设置 Jest。为此，请创建一个 jest.config.js 文件并添加以下配置：
module.exports = {
roots: ['<rootDir>/src'],
testMatch: ['<rootDir>/src/**/*.test.js'],
setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
};该配置指定 Jest 在 src 目录中搜索测试文件，文件名必须以 .test.js 结尾。还指定了一个 jest-setup.js 文件，该文件将在每次运行测试时自动运行。
编写测试用例
现在可以编写测试用例。以下代码示例创建了一个简单的 React 组件，并使用 Jest 对该组件进行了测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - -------- ----- --
---------------- - ----------------------------
-
------------- -
--------------- -------- ---- ---
-
-------- -
------ -
------- ---------------------------
------------------- - --------- - ------ ----
---------
--
-
-
------------------ -- -- -
------------ ------- ------ --- ---- ----- ---------- -- -- -
----- - --------- - - -------------- ----
----------------------- --------------------------
---
------------ ------- --------- ---- --------- -- -- -
----- - --------- - - -------------- ----
---------------- -------------
-------------------------------------------------
---
---在以上代码中，我们使用 Jest 提供的 describe 和 test 函数编写了两个测试用例。第一个测试用例测试组件在第一次渲染时是否正确显示了文本“Click me”。第二个测试用例测试点击组件时是否会更改按钮上的文本。
运行测试
现在可以运行测试。为此，请在命令行中运行以下命令：
npm test
该命令将使用 Jest 运行所有测试文件。如果一切正常且所有测试都通过，则输出将如下所示：
PASS src/Button.test.js
Button
✓ should display "Click me" when first rendered (19 ms)
✓ should display "Clicked" when clicked (12 ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total如果测试未通过，则输出将显示哪些测试失败了，并提供失败原因。
总结
使用 Jest 可以方便地对 React 应用程序中的 UI 进行测试。通过编写测试用例，并使用 Jest 运行这些测试用例，可以确保您的应用程序在经验不同方面的测试后，具有稳健的性能和可靠的 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0f98083d39b48815553ff