使用 Jest 进行前端单元测试：模拟 DOM 环境-js教程-PHP中文网

使用 Jest 进行前端单元测试：模拟 DOM 环境

花韻仙語

发布： 2025-09-27 16:54:01

原创

1031人浏览过

使用 jest 进行前端单元测试：模拟 dom 环境

本文档旨在帮助开发者使用 Jest 框架进行前端单元测试，特别是针对需要在浏览器环境中运行的 JavaScript 代码。我们将详细介绍如何利用 Jest 提供的 jsdom 环境来模拟 DOM，以便在 Node.js 环境中进行有效的单元测试，并提供一个实际示例。

前端单元测试与 DOM 模拟

在前端开发中，许多 JavaScript 代码直接操作 DOM（Document Object Model），例如修改元素内容、添加事件监听器等。为了对这些代码进行单元测试，我们需要模拟一个类似浏览器的环境，提供 DOM API。Jest 框架通过 jsdom 库提供了这样的环境。

jsdom 是一个纯 JavaScript 实现的 DOM 和 HTML 标准的实现。它允许你在 Node.js 环境中创建和操作 DOM 结构，使得你可以测试那些依赖于浏览器环境的代码。

使用 Jest 和 jsdom 进行单元测试

以下是一个简单的例子，展示了如何使用 Jest 和 jsdom 来测试一个操作 DOM 的函数。

立即学习“前端免费学习笔记（深入）”；

1. 被测试的函数 (tested_file.js):

function hello_world() {
    console.log(document.documentElement.outerHTML);
    return document.getElementById("id1").id;
}

// Export the function for testing purposes
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        hello_world: hello_world,
    };
}

登录后复制

这个函数 hello_world 的功能是获取 id 为 "id1" 的元素的 id 属性。

2. 测试文件 (tested_file.test.js):

影像之匠PixPretty

商业级AI人像后期软件，专注于人像精修，色彩调节及批量图片编辑，支持Windows、Mac多平台使用。适用于写真、婚纱、旅拍、外景等批量修图场景。

299

查看详情

/**
 * @jest-environment jsdom
 */

const { hello_world } = require("./tested_file.js"); // 替换为你的实际路径

describe('hello_world', () => {
    beforeEach(() => {
        document.body.innerHTML = `
            <html>
            <body>
                <img id="id1" src="">
            </body>
            </html>
        `;
    });

    test('returns correct id', () => {
        expect(hello_world()).toBe("id1");
    });
});

登录后复制

解释:

/** @jest-environment jsdom */：这个注释告诉 Jest 使用 jsdom 环境运行该测试文件。这也可以在 jest.config.js 文件中配置，但是使用注释可以更清晰地表明每个测试文件使用的环境。
require("./tested_file.js")：导入被测试的函数。
describe('hello_world', ...)：定义一个测试套件，用于组织相关的测试用例。
beforeEach(() => { ... })：这个函数会在每个测试用例执行之前运行。在这里，我们使用它来设置 DOM 结构。 document.body.innerHTML 允许我们直接设置 document.body 的 HTML 内容，从而模拟我们需要的 DOM 结构。
test('returns correct id', () => { ... })：定义一个测试用例，用于验证 hello_world 函数的返回值是否符合预期。
expect(hello_world()).toBe("id1")：断言 hello_world 函数的返回值是否为 "id1"。

3. package.json:

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^29.0.0",
    "jest-environment-jsdom": "^29.0.0"
  }
}

登录后复制

确保你的 package.json 文件中包含 jest 和 jest-environment-jsdom 作为开发依赖。运行 npm install 安装这些依赖。

4. 运行测试:

在命令行中运行 npm test 即可执行测试。

注意事项

选择器兼容性: jsdom 尽可能地模拟浏览器的 DOM API，但并非所有 API 都完全一致。某些 CSS 选择器或高级 DOM 操作可能存在差异。在编写测试时，需要注意兼容性问题。
异步操作: 如果被测试的代码包含异步操作（例如 setTimeout、Promise），你需要使用 Jest 提供的异步测试工具（例如 async/await、done 回调）来处理。
第三方库: 如果你的代码依赖于其他需要浏览器环境的第三方库，你需要确保这些库在 jsdom 环境中可以正常运行。某些库可能需要额外的配置或 Mock。
全局变量: 避免直接修改全局变量（如 window、document），而是在每个测试用例中创建独立的 DOM 实例，以避免测试用例之间的互相影响。使用 beforeEach 钩子可以方便地进行初始化。