在 Jest 中使用 jsdom 模拟 DOM 操作的详细介绍-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要进行 DOM 操作，例如添加、删除、修改元素等。而为了确保代码的正确性，我们需要进行单元测试。在 Jest 中，我们可以使用 jsdom 模拟 DOM 操作，从而进行单元测试。本文将详细介绍在 Jest 中使用 jsdom 模拟 DOM 操作的方法以及注意事项。

jsdom 简介

jsdom 是一个基于 Node.js 的模拟 DOM 环境，它可以在 Node.js 环境中模拟浏览器的部分行为，包括 DOM 操作、事件触发等。通过使用 jsdom，我们可以在 Node.js 中运行前端代码，从而进行单元测试等操作。

在 Jest 中使用 jsdom

在 Jest 中，我们可以通过安装 jsdom 包来使用 jsdom。安装方法如下：

npm install jsdom --save-dev

安装完成后，我们可以在测试文件中引入 jsdom：

const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;

上述代码中，我们首先引入了 jsdom 包，并创建了一个空的 DOM。然后将 document 和 window 对象赋值给全局变量，从而在测试文件中可以直接使用这些对象。

jsdom 的注意事项

在使用 jsdom 进行单元测试时，需要注意以下几点：

1. 事件触发

在 jsdom 中，事件的触发需要手动调用，例如：

const button = document.createElement('button');
button.addEventListener('click', () => {
  console.log('button clicked');
});
button.click(); // 手动触发 click 事件

2. 定时器

在 jsdom 中，定时器的执行需要手动调用，例如：

jest.useFakeTimers();

setTimeout(() => {
  console.log('timeout');
}, 1000);

jest.runAllTimers(); // 手动触发定时器

3. 异步操作

在 jsdom 中，异步操作的执行需要手动调用，例如：

// javascriptcn.com 代码示例
const fetchData = async () => {
  const response = await fetch('https://api.github.com/');
  const data = await response.json();
  return data;
};

test('fetch data', async () => {
  const data = await fetchData();
  expect(data).not.toBeUndefined();
});

上述代码中，我们使用了 async/await 进行异步操作。在测试中，我们需要手动调用 await，从而等待异步操作完成。

示例代码

最后，我们来看一个使用 jsdom 进行单元测试的示例代码：

// javascriptcn.com 代码示例
const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;

const { handleClick } = require('./index');

describe('handleClick', () => {
  test('should console log', () => {
    const button = document.createElement('button');
    button.addEventListener('click', handleClick);
    button.click();
    expect(console.log).toHaveBeenCalledWith('button clicked');
  });
});

上述代码中，我们首先创建了一个空的 DOM，并将 document 和 window 对象赋值给全局变量。然后引入了待测试的模块 index，并编写了一个测试用例，测试 handleClick 函数是否能够正确地触发控制台输出。在测试用例中，我们手动触发了点击事件，并使用 expect 断言控制台输出是否正确。

总结

本文详细介绍了在 Jest 中使用 jsdom 模拟 DOM 操作的方法以及注意事项。使用 jsdom 进行单元测试可以有效地提高代码的可靠性和稳定性，建议开发者在日常开发中加以应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d3f59d2f5e1655d80cb39