深入浅出前端单元测试框架的实现原理

目录

前言

关于单元测试

测试容器和断言库

简介

测试容器实现示例

断言库实现示例

自动注入

函数测试

入参与调用次数监控的实现原理

扩展断言函数

模块

让它更优雅

---

前言

前端单元测试是一种非常重要的质量保障手段，它可以帮助开发者在开发过程中快速发现和修复代码中的问题。而实现一个好用的前端单元测试框架，则需要深入了解其原理和实现细节。

在本文开始之前，先说一下笔者对于单元测试（或集成测试、e2e 测试）的感受。

在国外，软件工程师们对于软件质量十分重视，大部分也都崇尚于使用 TDD 方式开发，保证代码质量。而国内往往不是十分重视自动化测试这方面。究其根本来说，国内确实存在不少原因导致自动化测试不流行。这里就不赘述了。

但是其实在中大型软件开发中，自动化测试其实十分重要。笔者认为，在现代软件开发中，完善的自动化测试和 Lint 工具、良好代码设计，基本可以保证软件长期保持稳定的生命力。

因此，笔者相信，即使不是现在，在未来，自动化测试也是工程师必备的一项技能（快乐下班的技能哈哈哈）。

关于单元测试

先看维基百科：

在计算机编程中，单元测试（英语：Unit Testing）又称为模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。

在前端背景下，这个也可以很简单理解为测试工具函数。通常来说，单元测试，关于验证我们应用中每一个函数是否调用正确。如何判断调用正确呢？考虑一般如下：

• 函数调用次数合理
• 函数入参符合预期
• 函数出参，也即是返回值符合预期

当然函数本身可能又会调用其他函数，或者也可以说函数会依赖其他模块、第三方库，同时函数也可能是同步或异步。所以当被测试的函数是纯函数时，就是测试函数本身的出入参是否符合预期就行了，否则，我们需要做许多 mock 的工作，借此来排除不是我们目标的测试代码。

当然我们日常工作中，如果要写单元测试的话，一般都会使用业界成熟的测试库，比如 jest、mocha、chai、ava、tape、QUnit 等等。其实大部分测试框架背后的原理基本类似。所以，让我们通过实现一个最简单的单元测试框架，来学习单元测试原理吧！

测试容器和断言库

测试框架基本可以拆分出两个部分：

• 测试容器（Test Runner）
• 断言库（Assertion Library）

简介

测试容器最基本的作用是，自动运行所有测试，对测试结果进行数据汇总等。我们常见的使用方式一般如下，编写测试单元：

// ./math.test.js
const { sumAsync, subtractAsync } = require('./math');

test('sumAsync adds numbers asynchronously', async () => {
  const result = await sumAsync(3, 7);
  const expected = 10;
  expect(result).toBe(expected);
});

test('subtractAsync subtracts numbers asynchronously', async () => {
  const result = await subtractAsync(7, 3);
  const expected = 4;
  expect(result).toBe(expected);
});

假设我们有 math 工具函数如下：

// ./math.js
const sum = (a, b) => a + b;
const subtract = (a, b) => a - b;
const sumAsync = (...args) => Promise.resolve(sum(...args));
const subtractAsync = (...args) => Promise.resolve(subtract(...args));

module.exports = { sum, subtract, sumAsync, subtractAsync };

我们用 jest 运行测试，在终端反馈汇总后的测试结果：

$ jest
 PASS  ./math.test.js
  ✓ sumAsync adds numbers asynchronously (4ms)
  ✓ subtractAsync subtracts numbers asynchronously (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.145s
Ran all test suites.

断言库一般形式如下：

expect(result).toBe(expected);
expect(func).toHaveBeenCalled();
expect(func).toHaveBeenCalledTimes(1);
expect(func).toHaveBee