本课程主要内容是什么？

入门

本课程将详细介绍单元测试，涵盖从简单函数到高阶函数再到 Promise 的各种场景。我们将学习 Jasmine 提供的工具及其使用方法。尽管你现在可能还不清楚如何使用单元测试，但我们会帮助你发现它们的价值和实用功能。

成为一名熟练的单元测试者将让你：

• 对自己编写的代码更有信心。

• 在质量保证（QA）或用户发现问题之前就发现缺陷。

• 明白哪些代码需要测试，哪些可以跳过。

• 更深入地理解自己的代码。

• 更好地理解他人编写的代码。

• 无论面对函数还是完整的单页应用组件，都能轻松进行单元测试。

任何人都可以独自踏上这段旅程。而更棒的是，我们可以一起通过本课程开启这段探索！

我们将一步步推进这个过程。在学习过程中，你会编写大量代码，并通过实例来学习。

你将学到什么

在大多数课程中，都会有一个（或多个）核心函数作为主要测试对象。 我们会回顾该函数并展示其逻辑，通常逐行分析。 接着是一个代码沙盒，其中包含函数及其测试代码。 最后是练习环节，提供一个类似的函数和测试文件结构，供你应用本课所学概念。

注意：尽管某些练习对你来说可能看起来很简单，但如果你真的动手尝试，才能从本课程中获得最大收获！

要求

为了充分掌握本课程内容，你需要具备一定的 JavaScript 基础知识。如果你觉得自己准备还不够，建议先学习这门 JavaScript 课程。

开始吧！

让我们通过下面的例子体验一下单元测试。

我们的目标是感受测试套件的外观。如果你对某些内容不理解也无需担心——我们将在后续课程中深入探讨单元测试的每一个方面。

函数实现

该函数是 Array map 方法的一个实现或 polyfill。它的功能如下：

• 接收一个数组和一个函数（投影函数）作为输入。
• 将数组中的每个元素作为参数传入该函数。
• 将函数调用的结果组成一个新的数组。

(关于 map 的详细信息，请参考 MDN)

1function map(arr, cb) { ... }
2
3var numbers = [1, 2, 3];
4var doubled = map(numbers, x => x * 2);
5// doubled === [2, 4, 6]

在上面的代码示例中，我们以 numbers 为输入，使用 map 函数将数组中的每个元素翻倍。输入是 [1, 2, 3]，输出结果为 [2, 4, 6]。

代码沙盒

现在你可以亲自尝试一下。在下方的代码沙盒中对 map 函数进行单元测试。

点击下方的“运行”按钮执行代码，并查看下方终端的输出结果。

你可以修改代码内容。点击“运行”按钮，观察更改对结果的影响。

在代码沙盒的终端输出中，我们看到四个测试均已通过。

详解

你在上方代码组件中看到的是一个最小化的测试套件，由两个文件组成。

第一个文件是 src/map.js。该文件包含了函数的实现逻辑：接收一个数组和一个函数，将函数应用于数组的每个元素，并将结果存入新数组中。

第二个文件是 src/map.spec.js。它包含了测试套件：

• const {map} = require('./map'); 这一行导入了 map 函数，使测试模块能够访问它。

• describe 函数用于定义 Jasmine（运行测试的工具）中的一个测试套件。它包含一个名称和一个函数实现。

• it 函数用于定义一个测试用例。它同样包含一个名称和一个函数实现。

这里有四个单元测试用例，分别验证：

• 将数组中每个元素翻倍。
• 提取数组中每个字符串的长度。
• 验证 map 函数对空数组的处理是否正确。
• 验证 map 函数在传入 null 数组时抛出错误。

每个测试用例都遵循一个简单的模式：从被测函数获取输出结果，并与预期结果进行比较。

注意：输出结果通常被称为 实际结果，并与 预期结果 进行对比——这就是单元测试的核心思想。

spec/support 文件夹包含 Jasmine 的配置信息，我们稍后会详细介绍。

动手实验

请在代码沙盒中自由尝试。修改文件内容，然后点击“运行”按钮，观察变化对输出的影响。

例如，尝试以下操作：

1. 在 src/map.spec.js 中，将第一个 it 改为 fit，然后运行代码。注意只有这一条测试会执行，其余测试都被跳过。

2. 在 src/map.js 中，故意引入一个错误或回归问题，修改实现逻辑后重新运行。你会发现测试失败（显示红色），从而有效捕获了问题。

3. 在 src/map.js 的第 8 行，将 let i = 0 改为 let i = 1，观察测试结果变为失败。

大胆尝试吧！如果想恢复原始代码，随时可以点击“重置”按钮。