npm 包 jest-env-jsdom-silent 使用教程

阅读时长 8 分钟读完

介绍

jest-env-jsdom-silent 是一个用于在 jest 环境中使用 JSDOM 的 npm 包。它可以帮助我们在测试前端代码时,模拟浏览器环境,进行 DOM 操作和事件触发等测试。

相比于 Jest 自带的 JSDOM 环境,jest-env-jsdom-silent 更加轻量化,能够快速启动和关闭,而且可以抑制一些 JSDOM 的冗长输出,使得测试日志更加简洁。

本文将介绍如何使用 jest-env-jsdom-silent,以及其中一些常用的 API。

安装和配置

首先,我们需要使用 npm 安装 jest-env-jsdom-silent,可以执行以下命令:

安装完成后,我们需要在 Jest 的配置文件中(比如 jest.config.js)添加以下配置:

这样,当我们执行 Jest 测试时,就会自动使用 jest-env-jsdom-silent 作为测试环境。

基本使用

在测试环境中,我们可以使用以下代码获取全局的 window 和 document 对象:

然后,就可以进行一些 DOM 操作了。比如,在某个元素上触发一个 click 事件:

需要注意的是,由于 JSDOM 并不支持所有的浏览器 API,一些高级的 DOM 操作可能会有所不同。在测试前,最好先阅读 Jest 和 JSDOM 的文档,了解其支持的 API。

快速启动和关闭

默认情况下,jest-env-jsdom-silent 在每个测试文件运行前都会启动一个 JSDOM 实例,这可能会影响测试的速度。为了解决这个问题,我们可以使用 jest-environment-preset 包中提供的 setupFilesAfterEnv 选项,将 JSDOM 的启动和关闭移动到 setup 文件中。这样,所有测试文件就可以共享同一个 JSDOM 实例了。

首先,我们需要先安装 jest-environment-preset 包:

然后,在 Jest 的配置文件中添加以下配置:

接着,我们需要在 jest.setup.js 文件中添加以下代码:

现在,我们可以在测试文件中快速的进行 DOM 测试了。

抑制 JSDOM 输出

在测试过程中,JSDOM 可能会输出一些冗长的信息,比如 console.log 输出的内容,或者图片加载等信息。这些信息可能会干扰测试日志的可读性。为了解决这个问题,我们可以使用 jest-env-jsdom-silent 提供的 suppressConsoleLog() API。

这个 API 会在测试运行前,暂时抑制掉 JSDOM 输出的 console.log 内容。需要注意的是,它并不会禁止 console.log 的调用,只是将其输出到了一个内存中的缓存数组中,我们可以使用 getConsoleLogs() 方法来获取缓存中的内容。

示例代码

最后,让我们来看看一个完整的测试文件,展示了 jest-env-jsdom-silent 的常用 API 的使用方法。假设我们要测试的代码是一个简单的计数器应用,代码如下:

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

--- ----- - --

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

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

然后,我们可以编写以下测试代码:

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

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

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

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

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

这个测试文件演示了如何使用 jest-env-jsdom-silent,来测试一个简单的前端应用。我们使用了 suppressConsoleLog() 方法抑制了 JSDOM 的输出,并使用 getConsoleLogs() 方法来获取被抑制的 console.log 内容。同时,我们还使用了 JSDOM 的 DOM 操作来测试计数器应用的功能。

总结

本文介绍了使用 jest-env-jsdom-silent 的方法,并展示了一些常用的 API 的使用示例。当我们需要测试前端代码时,可以考虑使用这个 npm 包来模拟浏览器环境,并进行 DOM 操作和事件触发等测试。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005725681e8991b448e86a5

纠错
反馈