介绍
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,可以执行以下命令:
npm install jest-env-jsdom-silent --save-dev
安装完成后,我们需要在 Jest 的配置文件中(比如 jest.config.js)添加以下配置:
module.exports = { // ... testEnvironment: 'jest-env-jsdom-silent', // ... };
这样,当我们执行 Jest 测试时,就会自动使用 jest-env-jsdom-silent 作为测试环境。
基本使用
在测试环境中,我们可以使用以下代码获取全局的 window 和 document 对象:
const { window } = global; const { document } = window;
然后,就可以进行一些 DOM 操作了。比如,在某个元素上触发一个 click 事件:
const button = document.querySelector('#button'); button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
需要注意的是,由于 JSDOM 并不支持所有的浏览器 API,一些高级的 DOM 操作可能会有所不同。在测试前,最好先阅读 Jest 和 JSDOM 的文档,了解其支持的 API。
快速启动和关闭
默认情况下,jest-env-jsdom-silent 在每个测试文件运行前都会启动一个 JSDOM 实例,这可能会影响测试的速度。为了解决这个问题,我们可以使用 jest-environment-preset 包中提供的 setupFilesAfterEnv 选项,将 JSDOM 的启动和关闭移动到 setup 文件中。这样,所有测试文件就可以共享同一个 JSDOM 实例了。
首先,我们需要先安装 jest-environment-preset 包:
npm install jest-environment-preset --save-dev
然后,在 Jest 的配置文件中添加以下配置:
module.exports = { // ... testEnvironment: 'jest-env-jsdom-silent', setupFilesAfterEnv: ['./jest.setup.js'], // ... };
接着,我们需要在 jest.setup.js 文件中添加以下代码:
const { setUpJestEnv } = require('jest-env-jsdom-silent'); setUpJestEnv();
现在,我们可以在测试文件中快速的进行 DOM 测试了。
抑制 JSDOM 输出
在测试过程中,JSDOM 可能会输出一些冗长的信息,比如 console.log 输出的内容,或者图片加载等信息。这些信息可能会干扰测试日志的可读性。为了解决这个问题,我们可以使用 jest-env-jsdom-silent 提供的 suppressConsoleLog() API。
const { suppressConsoleLog } = require('jest-env-jsdom-silent'); beforeEach(() => { suppressConsoleLog(); });
这个 API 会在测试运行前,暂时抑制掉 JSDOM 输出的 console.log 内容。需要注意的是,它并不会禁止 console.log 的调用,只是将其输出到了一个内存中的缓存数组中,我们可以使用 getConsoleLogs() 方法来获取缓存中的内容。
const { getConsoleLogs } = require('jest-env-jsdom-silent'); afterEach(() => { const logs = getConsoleLogs(); // 打印 logs 等于打印了所有被抑制的 console.log 内容 console.log(logs); });
示例代码
最后,让我们来看看一个完整的测试文件,展示了 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