如何设置 Jest 进行 React 测试？
已发表: 2023-07-26随着越来越多的开发人员采用 React 作为他们选择的前端框架，确保我们编写的代码具有最高质量变得越来越重要。 质量保证的一个重要方面是测试，Jest 是一种流行的测试框架，经常与 React 一起使用。
Jest 是一个由 Facebook 构建的开源测试框架，旨在使 JavaScript 代码的测试尽可能简单高效。 它速度快，具有易于使用的 API，并附带许多内置功能，使测试变得轻而易举。
在本文中，我们将指导您完成为 React 测试设置 Jest 的过程。 我们将涵盖您开始时需要了解的所有内容，从安装 Jest 到编写您的第一个测试用例。
React 测试的玩笑
Jest 是一个流行的测试框架，用于测试 React 应用程序。 它由 Facebook 创建，以其易用性和快速设置时间而闻名。 Jest 旨在与 React 开箱即用，并提供许多功能来使测试变得更容易。
以下是一些使 Jest 成为测试 React 应用程序的流行选择的功能：
i) 快照测试： Jest 提供快照测试功能，允许您将组件的当前输出与之前存储的快照进行比较。 这样可以轻松检查组件的输出是否发生了任何意外的更改。
ii) 模拟： Jest 提供内置模拟功能，允许您创建模拟函数和模块。 当您需要模拟不易获得或难以测试的功能或模块的行为时，这非常有用。
iii) 代码覆盖率： Jest 提供代码覆盖率报告，显示测试覆盖的代码百分比。 这对于识别代码中未经测试且可能需要额外注意的区域非常有用。
iv) 异步测试： Jest 通过提供管理异步代码的实用程序，使测试异步代码变得容易。 这允许您编写测试，在做出断言之前等待 Promise 或其他异步代码解析。
v) 轻松设置： Jest 很容易为您的 React 应用程序设置和配置。 它具有开箱即用的默认配置，但可以进行自定义以满足您的特定需求。
总的来说，Jest 是一个强大而灵活的测试框架，可以轻松测试 React 应用程序。 它的众多功能和简单的设置使其成为想要为其 React 组件编写可靠测试的开发人员的流行选择。
设置 Jest 进行 React 测试
您需要遵循某些步骤来设置 Jest 以进行 2023 年的 React 测试。
1）安装笑话
Jest 可以使用npm 或yarn 安装在您的项目中。 以下是使用 npm 安装 Jest 的步骤：
i) 打开终端或命令提示符并导航到项目目录。
ii) 运行以下命令将 Jest 安装为项目中的开发依赖项：
npm install –save-dev 玩笑
此命令将安装 Jest 并将其添加到项目的 package.json 文件的 devDependencies 部分下。
安装完成后，您可以开始使用 Jest 编写测试。 您可以使用 npm test 命令运行测试。 默认情况下，Jest 会查找以.test.js或.spec.js扩展名命名的测试文件。 但是，您可以通过修改 Jest 配置文件中的 testMatch 属性来配置 Jest 以查找具有其他扩展的测试。
就是这样！ 您现在已经在项目中安装了 Jest，并且可以开始为您的应用程序编写测试。
2）创建配置文件
要为 Jest 创建配置文件，您可以在项目的根目录中创建一个名为jest.config.js的文件。 该文件将包含 Jest 在运行测试时应使用的配置选项。
这是一个配置文件示例：
模块. 导出 = {
// 指示哪些文件类型应被视为测试文件。
测试匹配：[
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
],
// Jest 用于搜索文件的目录路径列表。
根：['<rootDir>/src']，
// 从正则表达式到变压器路径的映射。
转换： {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
},
// Jest 用于检测测试文件的 glob 模式。
测试路径忽略模式：[
'<根目录>/node_modules/',
'<根目录>/build/'
],
// Jest 在撰写报道报告时使用的记者姓名列表。
覆盖率记者：['json', 'text', 'html'],
// 模块使用的文件扩展名数组。
moduleFileExtensions: ['js', 'json', 'jsx']
};
此示例配置文件指定以下选项：
a) testMatch：指定用于识别测试文件的模式。
b) root：指定 Jest 应在其中查找文件的目录。
c) 转换：指定 Jest 在运行测试之前应应用于文件的转换。
d) testPathIgnorePatterns：指定搜索测试文件时要忽略的模式。
e)coverageReporters：指定 Jest 应该用来生成覆盖率报告的报告器。
f) moduleFileExtensions：指定 Jest 在搜索文件时应查找的文件扩展名。
您可以修改此配置文件以满足您的项目的需要。 创建配置文件后，Jest 将在项目中运行测试时自动使用它。
3）编写你的测试
一旦安装了 Jest 并设置了配置文件，您就可以开始为 React 应用程序编写测试。 以下是创建测试文件并编写测试的步骤：
i)创建一个扩展名为.test.js或.spec.js的新文件。 这将是您的测试文件。
ii)在测试文件中，导入要测试的组件或功能：
从 './myFunctions' 导入 { sum } ；
iii)编写你的测试。 测试是使用 Jest API 检查组件或函数是否按预期运行的函数：
描述('总和', () => {
test('1 + 2 加起来等于 3', () => {
期望(sum(1, 2)).toBe(3);
});
});
在此示例中，我们正在测试一个将两个数字相加的简单求和函数。 描述函数将相关测试分组在一起，而测试函数指定单个测试用例。 Expect 函数检查 sum 函数是否返回预期值。
iv)通过在项目目录中执行 npm test 命令来运行测试。 Jest 将在您的项目中搜索测试文件并执行它找到的任何测试。
您可以根据需要添加任意数量的测试，以涵盖组件或函数的所有功能。 Jest 提供了广泛的匹配和其他实用程序，您可以使用它们来创建更复杂的测试。
通过为 React 应用程序编写测试，您可以确保代码按预期工作，并避免在更改代码库时引入回归。
4) 运行测试
要使用 Jest 运行测试，您可以在项目目录中使用 npm test 命令。 Jest 将自动检测并运行项目中与 Jest 配置文件中指定的模式匹配的任何测试文件。
当您运行 npm test 时，Jest 将在控制台中输出测试结果。 如果所有测试都通过，Jest 将显示测试结果摘要：
通过 src/components/Example.test.js
✓ 渲染不会崩溃（21 毫秒）
测试套件：1 个通过，总共 1 个
测试：1 次通过，总共 1 次
快照： 共 0 个
时间：3.204s，预计4s
运行所有测试套件。
如果任何测试失败，Jest 将显示一条错误消息，描述失败以及失败测试的位置：
失败 src/components/Example.test.js
- 示例组件 › 渲染而不会崩溃
类型错误：无法读取未定义的属性“映射”
10 | 10 使成为（） {
11 | 11 const { items } = this.props;
> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);
| ^
13 | }
14 | 14 }
15 | 15
在Example.render (src/components/Example.js:12:17)
在 ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)
在 Object.<anonymous> (src/components/Example.test.js:9:16)
测试套件：1 次失败，总共 1 次
测试：1 次失败，总共 1 次
快照： 共 0 个
时间：3.537s，预计4s
运行所有测试套件。
Jest 还提供了一系列可用于自定义测试行为的选项，例如在监视模式下运行测试、生成代码覆盖率报告等。 您可以在 Jest 文档中找到有关这些选项的更多信息。
包起来
LambdaTest 是一个强大的基于云的测试平台，可以与 Jest 结合使用来测试 React 应用程序。 通过利用 LambdaTest 基于云的基础架构的可扩展性，您可以在各种浏览器和设备上快速高效地运行 Jest 测试，确保您的应用程序在不同环境中按预期运行。
在本博客中，我们介绍了设置 Jest 来测试 React 应用程序所需的步骤。 我们还学习了如何配置 Jest 以使用 LambdaTest 作为测试环境、使用 Jest 编写测试以及在 LambdaTest 的基于云的基础设施上执行测试。
结合使用 LambdaTest 和 Jest 为 React 开发人员提供了强大的测试解决方案，可以帮助他们在开发周期的早期捕获回归和错误，从而提高应用程序的整体质量。
因此，如果您希望简化 React 测试工作流程，请考虑结合使用 LambdaTest 和 Jest 来为您的 React 应用程序实现全面、可扩展且高效的测试。