本文为稀土金块技术社区的第一篇署名文章。 14日内禁止转载，14日后禁止擅自转载。侵权必究！
大家好，我是小嘟嘟，我们知道常用的测试类型有： 功能测试 , 单元测试 , 集成测试 , 冒烟测试 等等，在哪里 单元测试 这是我们必须掌握的技术，所以让我们来看看为什么今天需要单元测试，作为一个 反应 开发人员需要掌握哪些技能？
如果您耐心阅读本章，您将学到以下内容：
- 什么是单元测试？为什么我们需要它？
- 如何做一个简单的单元测试？
- Jest 有什么语法，Jest 的报告包含什么信息？
- 如何兼容ts，需要什么配置？
- …
同时附上今天的知识图，也请大家多多支持~
单元测试
有的朋友看到想聊 单元测试 ，可能会下意识地避免，因为 单元测试 比较麻烦，而且从某种角度来说也是比较麻烦的 无味 ，主要有以下几个原因：
1.对于大部分人来说，实际工作中是不需要的（需求写不出来，怎么可能写单元测试）
2. 是 语法相当于一门新语言，有一定的学习成本
3.配置虽然麻烦 是 入门文档看似很简单，但实际情况是：只要一个配置不合适，所有的测试都跑不起来，挺难受的。
以上几点可能是人们不想接触单元测试的主要原因，但是 单元测试 这确实是一个无法访问的 实用技巧 ，和一些开源产品一样，会有最基本的单元测试，所以 单元测试 是我们 先进的 不可或缺的一部分
什么是单元测试？
单元测试 : 指 原单位 对于单元，测试软件。
在 单元 可 一个函数 ，也可以是 一个模块 或者 一个组件 ，基本特征是只要输入不变，就必须返回相同的输出。
一个软件越容易进行单元测试，它的模块化结构就越好，模块之间的耦合就越弱。
我们都知道 反应 非常自由，它的组件化思维， 反应钩子 流行，非常适合单元测试
单元测试有什么好处？
首先我认为 单元测试 这是一项非常具有挑战性的工作，因为它要么成功，要么失败。在此期间，可能会出现各种问题。手动实现它更有利。接下来，让我们看看单元测试能给我们带来什么。有什么好处：
确保质量
单元测试可以有效防止我们减少 错误率
虽然 漏洞 我们无法避免，但没有人愿意 漏洞 很多，单元测试会让我们不得不思考一下 异常场景 ，这无形中增强了代码的 质量
描述代码
描述现有的代码，即 例子 作为记录。
比如有时候我们在写一个比较大的组件的时候，没有很好的例子来说明各个参数的作用，保证代码在各种情况下都能正常运行，单元测试可以 解读这段代码的含义 ，并且可以被其他开发者查看以增强代码 可读性
提升个人实力
抛开其他一切不谈，单元测试可以起到很大的推动作用 专业领域 .
第一的 单元测试 可以算作一个单独的字段，不同的框架需要不同的配置，如果依赖的组件发生变化，受影响的组件可能会出错。
其次，不同的环境，不同的测试框架会有一定的冲突（版本问题）
最后，可以模拟各种环境，并且 嘲笑 能力，例如： 反应 有 反应测试库 , 下一个 有 @nestjs/测试 等待
可以看出 单元测试 这是一个非常大的模块，也是一个值得研究的领域。一般来说， 利大于弊 ，想要进阶的请耐心阅读，相信一定会让你受益匪浅~
是
是 是的 Facebook 一个开源的前端测试框架，主要用于 反应 和 反应原生 单元测试，并集成在 创建反应应用 中间。
玩笑的特点
使用方便：基于茉莉花，提供断言库, 支持多种测试风格适应性： 有模块化的,可扩展和可配置的沙盒和快照: Jest 内置了 JSDOM，可以模拟浏览器环境, 并并行执行快照测试: Jest 可以对 React 组件树进行操作序列化，生成对应的字符串快照，通过字符串比较提供高性能的UI检测模拟系统: Jest 实现了一个强大的 Mock 系统并支持自动的和手动模拟支持异步代码测试：支持承诺和异步/等待自动生成静态分析结果: 内置伊斯坦布尔，测试代码覆盖率，并生成相应的报告
第一个测试程序
初始化项目
mkdir is-test
cd is-test
// 初始化 package.json 文件
npm 初始化 -y
// 安装是
npm 和 -D 是
复制代码
初始化是
// 实施
npx 是 --init
复制代码
此时，会弹出一堆问题供您选择。当您选择时，将生成一个问题。 is.config.js ，这大约是 是 配置文件。
再看一遍 is.config.js 文档：
模块。出口 = {
clearMocks：是的，
收集覆盖：真实，
覆盖目录：“覆盖”，
覆盖提供者：“v8”，
};
复制代码
例子
我们在目录中创建 src/sum.js 文件和 src/sum.test.js 文档
// src/sum.js
常量总和 = ( a, b) => {
返回 a + b;
}
模块。出口=总和；
// src/sum.test.js
const sum = require('./sum');
描述（'总和'，（）=> {
it('总和：1 + 2 = 3', () => {
期望（总和（1, 2））。等于（3）；
});
})
复制代码
实施
此时，我们可以执行命令
// npx 是
npm 运行测试
复制代码
你可以看到信息
单独执行
当我们的项目比较大的时候，我们只需要测试当前文件
// npx 是
npm run test 文件路径
复制代码
这里的文件路径是 相对路径 ，它会自动匹配相同格式的文件，例如：
Jest 配置说明
我们完成了一个简单的 是 测试一下，接下来我们讲解一下各个文件的配置模块，方便我们后面进行
配置文件
我们通过 npx 是 --init 生成一个 is.config.js 文件，这个文件是关于 是 配置文件
此外，您可以通过 npx 是 --help 查看全部 有cli 选项
由于要配置的字段太多，这里就介绍一些常用的配置。您可以查看特定字段： 配置有
三种方式
第一种：我们可以将配置文件写入 is.config.js ，它返回一个 目的 或一个 功能 ，喜欢：
// 目的
从'jest'导入类型{配置}；
常量配置：配置 = {
详细：真实，
...
};
导出默认配置；
// 功能
从'jest'导入类型{配置}；
导出默认异步 (): Promises< Config> => {
返回 {
详细：真实，
...
};
};
复制代码
第二：可以像 包.json 配置相应的 json 文件，命名为： is.config.json ， 喜欢：
{
“保释”：1，
“详细”：真实，
...
}
复制代码
第三种：直接写入 包.json 在，写在 是 ， 如：
{
...
“是”： {
“详细”：是的
}
...
}
复制代码
特定领域
基础领域
clearMocks:type: boolean, default: false, 每次测试前自动清除模拟上下文收集覆盖: type: boolean, default: false, 是否开启覆盖范围覆盖目录: type: string, default: undefined, 生成的coverage文件的文件位置覆盖提供者:type: string, babel (default)/v8, 指示应该使用哪个提供程序来检测代码以进行覆盖最大并发:type: number，默认值：5，一个数字，用于限制使用时允许并发运行的测试数量。预设: type: string, default: undefined, default field, 应该指向哪个文件，可以是文件包或路径，如安装是翻译转换：类型目的\<string, pathToTransformer | [pathToTransformer, object]>，默认：{"^. + \\. [jt] sx?$": "babel-is"}, 转换器，可以使用正则，来匹配路径转换忽略模式：类型：大批<string>，默认：["/node_modules/", "\\.pnp\\.[^\\\/]+$"]，一个正则表达式模式字符串数组，匹配转换前的所有源文件路径。如果文件路径与 任何 模式匹配，它不会被转换。显示名称: 类型：字符串 | object，默认：undefined，这个参数可以直接告诉测试属于哪个项目collectCoverageFrom：类型：数组，默认：未定义，缓存目录：类型：字符串，默认值：/tmp/<path>，用于存放依赖信息缓存的目录。测试超时：类型：数字，默认：5000，测试默认超时测试环境: type: string, default: node, 用于模拟测试的测试环境，如果我们使用浏览器环境（如：document），我们可以使用我在家代替测试匹配：类型：大批<string>，用于匹配对应文件下的文件testPathIgnorePatterns：类型：大批<string>，默认：["/node_modules/"], 在检测过程中跳过一些文件
…
collectCoverageFrom
类型：array，默认：undefined，通过该参数可以设置收集哪些文件配置信息，如：
从'jest'导入类型{配置}；
常量配置：配置 = {
收集覆盖范围：[
'**/*.{ts,tsx}',
'!**/node_modules/**',
'！**/小贩/**'，
],
};
导出默认配置；
复制代码
此配置将收集 根目录 下 ts，ts 的所有文件
不匹配 **/node_modules/** 或者 **/小贩/** 文档
项目
类型：数组<string | ProjectConfig>, default: undefined，我们可以通过这个参数来配置我们的项目，当它会提供一组路径或者glob模式时，Jest会同时在所有指定的项目中运行测试。
例如：
从'jest'导入类型{配置}；
常量配置：配置 = {
项目：['<rootDir> ', '<rootDir> /例子/*']，
};
导出默认配置；
复制代码
这个配置可以在 根目录 也 在示例目录中 在每个文件夹中运行 Jest
另一个例子：
常量配置：配置 = {
项目：[{
测试环境：'jsdom'，
displayName: 'react-jest',
测试匹配：[`<rootDir> /react-jest/src/**/*.test.ts?(x)`],
testPathIgnorePatterns：['/node_modules/']，
缓存目录：`./node_modules/.cache/jest`，
测试超时：30000，
...
}],
};
复制代码
就像上面这个，我们知道 是 默认环境是 节点 ，但我们是 反应是 如果环境期望是浏览器的环境，可以单独设置 反应是 下面的文件是 我在家 ，匹配 测试 的 ts 或者 tsx 文件，删除一些文件（例如 节点模块 ) 和其他一些配置
全局设置
我们通过 sum.test.js 文件，找到 描述 和 预计 ，但是我们没有介绍相应的功能，但是可以正常使用。为什么是这样？
实际上 是 将这些方法和对象注入到测试文件的 全球环境 ，所以我们不需要通过 进口 或者 要求
当然，如果一定要引用，可以这样引用：
从 '@jest/globals 复制代码导入 {describe, expect, test}
我们主要讲6个主要方法，更多方法请参考： Jest-全局设置
描述
描述 ：描述块，将一组功能相关的测试用例组合在一起
用法： 描述（名称，fn）