现代前端开发离不开单元测试。它可以确保你的代码在修改后依然能够正确地运行,起到了提高代码质量和可维护性的作用。随着前端开发的不断发展,测试工具的选择也越来越多。其中,Jest 可谓是其中的佼佼者。Jest 是一个由 Facebook 开源的 JavaScript 测试框架,具有快速、简洁的特点,为前端开发提供了简便易行的测试工具。
安装
安装 Jest 非常简单,只需在终端输入以下命令:
npm install --save-dev jest
这里使用了 npm 来安装 Jest,也可以使用 yarn。需要注意的是,这种安装方式是将 Jest 安装在本地开发环境中,如果想全局使用 Jest,可以加上 -g 参数。
配置
在使用 Jest 之前,需要先进行一些基本的配置来告诉 Jest 应该如何运行测试。创建一个名为 jest.config.js 的文件,并在其中添加以下代码:
module.exports = { testEnvironment: 'node', testMatch: ['<rootDir>/tests/**/*.test.js'], };
该配置文件指定了 Jest 的运行环境为 node,同时也指定了测试文件的位置。
基本使用
编写测试的本质就是编写函数或模块,然后编写测试代码来验证函数或模块的行为是否符合预期。使用 Jest 编写测试非常容易,只需要遵循以下规则:
- 测试文件必须以 .test.js 结尾。
- 测试文件应该和被测试的文件放在同一个目录下,比如在 src/ 目录中放置代码,那么测试文件就应该在 src/ 目录下的 tests/ 目录中。
- 测试文件中应该使用 test 函数来定义测试用例。
先看一个例子。假设存在一个能够将两个数相加的函数 add(a, b),现在我们要编写一个测试用例来验证该函数是否正确。创建一个名为 add.test.js 的文件,并在其中编写如下测试用例:
-- -------------------- ---- ------- -- -------- ----- --- - ------------------ -- ------------------- --------- --- --------- -- -- - ------------- ------------ --- --------- -------- -------- -- -- - -------------- ------------ --- --------- -------- -- -- - --------------- ----------------------- ---
以上代码使用了 test 函数来定义测试用例,expect 函数用于定义断言,toBe 函数用于判断实际结果是否为预期结果,toBeCloseTo 用于比较浮点数是否相等。我们还需要创建 add.js 文件,并在其中添加以下代码:
function add(a, b) { return a + b; } module.exports = add;
这样,我们就编写了一个简单的测试用例,验证了一个简单的函数的行为是否符合预期。
mock
在写单元测试时,我们经常需要模拟一些数据或者函数,这时候 Jest 的 mock 功能就能派上用场。Jest 提供了 jest.fn() 来模拟一个函数。例如,我们想要测试一个需要调用外部 API 的函数,但是又不想真正的调用外部 API,这时候可以使用 Jest 的 mock 功能。我们可以先通过 jest.fn() 函数创建一个模拟函数,然后将模拟函数传入被测试函数中,即可达到测试函数的目的。
下面以一个简单的例子来了解 Jest 的 mock 功能。假设有一个能够发送请求的函数 request(url, options),现在我们要编写一个测试用例来验证该函数是否正确。我们可以使用 Jest 的 mock 功能来模拟外部 API 的调用。创建一个名为 request.test.js 的文件,并在其中添加以下代码:
-- -------------------- ---- ------- -- -------- ----- ------- - ---------------------- -- ------ ----------- ------ -- -- - ----- ----------- - ---------- -- ----------------- ----- ------ ---- ------ ----------------------------- - ------- ------ -------- ----------- -------------- -- - ----------------------------- --------------------------------------- -------------------------------------------------------------- - ------- ------ --- --- ---
在以上测试用例中,我们使用了 Jest 的 mock 函数 jest.fn() 来模拟一个请求,通过 Promise.resolve() 来返回一个 Promise 对象,使得我们可以在测试用例中使用 Promise.then() 去处理请求的结果。我们还可以使用 toHaveBeenCalled() 来断言模拟函数是否被调用,使用 toHaveBeenCalledWith() 来断言模拟函数被调用时的参数是否符合预期。
长跑测试
有些测试用例可能需要长时间才能完成,需要等待异步操作完成或者等待时间到达,只有等到一定条件满足时,测试结果才会返回。例如,我们要测试一个需要等待 5 秒钟的函数,这时候可以使用 Jest 的异步测试来测试。在 Jest 中,我们可以使用 test() 的 done 参数,也可以通过返回 Promise 的方式来测试异步代码。
下面我们来看一个简单的例子,假设有一个需要异步加载的函数 loadData(),我们需要测试函数是否能成功加载数据。我们可以在进行测试时,模拟异步操作,等待数据加载完成后再进行下一步的操作。创建一个名为 loadData.test.js 的文件,并在其中添加以下代码:
-- -------------------- ---- ------- -- -------- ----- -------- - ----------------------- ---------- ------ ------ -- - -------- -------------- - -------------------------- ------- - ------------------- ---
在以上测试用例中,我们使用了 Jest 的 test() 函数,并在其中使用 done 来告诉 Jest 该测试用例是一个异步测试用例。在 loadDate() 模拟数据加载完成后,我们使用 expect() 函数来断言数据加载是否成功。
结语
通过本文的介绍,你已经知道了 Jest 的基本使用和 mock 功能以及如何测试异步代码。在使用 Jest 进行测试时,需要时刻牢记单元测试的目的是保证代码行为符合预期。使用 Jest 能够快速编写单元测试,它的简单易用、高效快速,使得 Jest 成为了前端开发的单元测试的首选工具。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/679746a2504e4ea9bde59a8e