Jest 框架的实现原理如何深入浅出地讲解？

English Version | 中文版 深入浅出 Jest 框架的实现原理 https://github.com/Wscats/jest-tutorial 什么是 Jest Jest 是 Facebook 开发的 Javascript 测试框架，用于创建、运行和编写测试的 JavaScript 库。 Jest 作为 NPM 包发布，可以安装并运行在任何 JavaScript 项目中。Jest 是目前前端最流行的测试库之一。 测试意味着什么 在技 ​​ 术术语中，测试意味着检查我们的代码是否满足某些期望。例如：一个名为求和(sum)函数应该返回给定一些运算结果的预期输出。 有许多类型的测试，很快你就会被术语淹没，但长话短说的测试分为三大类： 单元测试 集成测试 E2E 测试 我怎么知道要测试什么 在测试方面，即使是最简单的代码块也可能使初学者也可能会迷惑。最常见的问题是“我怎么知道要测试什么？”。 如果您正在编写网页，一个好的出发点是测试应用程序的每个页面和每个用户交互。但是网页其实也需要测试的函数和模块等代码单元组成。 大多数时候有两种情况： 你继承遗留代码，其自带没有测试 你必须凭空实现一个新功能 那该怎么办？对于这两种情况，你可以通过将测试视为：检查该函数是否产生预期结果。最典型的测试流程如下所示： 导入要测试的函数 给函数一个输入 定义期望的输出 检查函数是否产生预期的输出 一般，就这么简单。掌握以下核心思路，编写测试将不再可怕： 输入 -> 预期输出 -> 断言结果。 测试块，断言和匹配器 我们将创建一个简单的 Javascript 函数代码，用于 2 个数字的加法，并为其编写相应的基于 Jest 的测试 const sum = (a, b) => a + b; 现在，为了测试在同一个文件夹中创建一个测试文件，命名为 test.spec.js，这特殊的后缀是 Jest 的约定，用于查找所有的测试文件。我们还将导入被测函数，以便执行测试中的代码。Jest 测试遵循 BDD 风格的测试，每个测试都应该有一个主要的 test 测试块，并且可以有多个测试块，现在可以为 sum 方法编写测试块，这里我们编写一个测试来添加 2 个数字并验证预期结果。我们将提供数字为 1 和 2，并期望输出 3。 test 它需要两个参数：一个用于描述测试块的字符串，以及一个用于包装实际测试的回调函数。expect 包装目标函数，并结合匹配器 toBe 用于检查函数计算结果是否符合预期。 这是完整的测试： test("sum test", () => { expect(sum(1, 2)).toBe(3); }); 我们观察上面代码有发现有两点： test 块是单独的测试块，它拥有描述和划分范围的作用，即它代表我们要为该计算函数 sum 所编写测试的通用容器。 expect 是一个断言，该语句使用输入 1 和 2 调用被测函数中的 sum 方法，并期望输出 3。 toBe 是一个匹配器，用于检查期望值，如果不符合预期结果则应该抛出异常。 如何实现测试块 测试块其实并不复杂，最简单的实现不过如下，我们需要把测试包装实际测试的回调函数存起来，所以封装一个 dispatch 方法接收命令类型和回调函数： const test = (name, fn) => { dispatch({ type: "ADD_TEST", fn, name }); }; 我们需要在全局创建一个 state 保存测试的回调函数，测试的回调函数使用一个数组存起来。 global["STATE_SYMBOL"] = { testBlock: [], }; dispatch 方法此时只需要甄别对应的命令，并把测试的回调函数存进全局的 state 即可。