使用 Jest 撰写测试:前端的单元测试工具

阅读时长 6 分钟读完

现代前端开发离不开单元测试。它可以确保你的代码在修改后依然能够正确地运行,起到了提高代码质量和可维护性的作用。随着前端开发的不断发展,测试工具的选择也越来越多。其中,Jest 可谓是其中的佼佼者。Jest 是一个由 Facebook 开源的 JavaScript 测试框架,具有快速、简洁的特点,为前端开发提供了简便易行的测试工具。

安装

安装 Jest 非常简单,只需在终端输入以下命令:

这里使用了 npm 来安装 Jest,也可以使用 yarn。需要注意的是,这种安装方式是将 Jest 安装在本地开发环境中,如果想全局使用 Jest,可以加上 -g 参数。

配置

在使用 Jest 之前,需要先进行一些基本的配置来告诉 Jest 应该如何运行测试。创建一个名为 jest.config.js 的文件,并在其中添加以下代码:

该配置文件指定了 Jest 的运行环境为 node,同时也指定了测试文件的位置。

基本使用

编写测试的本质就是编写函数或模块,然后编写测试代码来验证函数或模块的行为是否符合预期。使用 Jest 编写测试非常容易,只需要遵循以下规则:

  • 测试文件必须以 .test.js 结尾。
  • 测试文件应该和被测试的文件放在同一个目录下,比如在 src/ 目录中放置代码,那么测试文件就应该在 src/ 目录下的 tests/ 目录中。
  • 测试文件中应该使用 test 函数来定义测试用例。

先看一个例子。假设存在一个能够将两个数相加的函数 add(a, b),现在我们要编写一个测试用例来验证该函数是否正确。创建一个名为 add.test.js 的文件,并在其中编写如下测试用例:

-- -------------------- ---- -------
-- --------
----- --- - ------------------

-- -------------------
--------- --- --------- -- -- -
  ------------- ------------
---

--------- -------- -------- -- -- -
  -------------- ------------
---

--------- -------- -- -- -
  --------------- -----------------------
---

以上代码使用了 test 函数来定义测试用例,expect 函数用于定义断言,toBe 函数用于判断实际结果是否为预期结果,toBeCloseTo 用于比较浮点数是否相等。我们还需要创建 add.js 文件,并在其中添加以下代码:

这样,我们就编写了一个简单的测试用例,验证了一个简单的函数的行为是否符合预期。

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

纠错
反馈