Jest mock 实战：如何用 Jest 模拟 SVG 属性-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要处理与 SVG 图形相关的工作，包括其属性，如viewBox、line 等等。但是，在进行单元测试时，测试这些属性可能是很困难的，因为它们需要涉及到浏览器特定的 API。Jest 作为一款流行的 JavaScript 测试框架，提供了 Mock 功能，让我们可以更好地解决这个问题。

在本文中，我们将深入探讨 Jest 的 Mock 功能，并通过实际例子，介绍如何使用 Jest 模拟 SVG 属性。

Mock 的基本概念

在软件开发中，Mock 是一种测试技术，它可以模拟外部依赖项或难以复现的情况以进行前端测试。Mock 就是一段代码，它模拟了一个真实的对象或方法。在 Jest 中，mock 函数是创建 Mock 对象的主要方式。

当调用一个 Mock 方法时，不会执行真实函数的代码，而是返回一个可预测的结果。我们可以根据需要修改返回值或行为，以便测试运行的不同情况。

模拟 SVG 属性

在前端领域，SVG（Scalable Vector Graphics）非常流行。但是，由于 SVG 属性依赖于浏览器的特定实现，测试它们往往是很困难的。这时，Jest 的 Mock 功能就变得尤为重要。

下面我们将以属性viewBox为例，介绍如何使用 Jest 模拟 SVG 属性。

安装

首先，我们需要使用 npm 安装 Jest。在命令行中执行以下命令：

npm install --save-dev jest

创建 Mock 函数

我们可以使用 Jest 提供的 jest.fn() 方法创建 Mock 函数。这个方法可以创建一个可以调用并记录其被调用情况的函数。

const mockFn = jest.fn();

模拟属性

接下来，我们可以使用 Mock 函数模拟要测试的 SVG 属性。在这个例子中，我们将用 mockFn() 模拟 viewBox 属性。在测试中，当代码运行到读取 viewBox 属性的位置时，将返回 Mock 函数设置好的值。

Object.defineProperty(window.SVGElement.prototype, 'viewBox', {
  get: mockFn
});

测试

最后，我们可以编写测试代码，确保模拟函数工作正常。在这个例子中，我们可以测试 Mock 函数是否被调用，并检查返回值是否与预期值一致。

describe('test viewBox property', () => {
  it('should return specified value', () => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    Object.defineProperty(svg, 'viewBox', { value: '0 0 100 100' });
    expect(svg.viewBox).toBe('0 0 100 100');
    expect(mockFn).toHaveBeenCalled();
  });
});

在这个测试中，我们使用 document.createElementNS() 创建了一个新的 svg 元素。然后，我们在该元素上设置了一个实际值，并检查它是否与预测一致，同时也检查 Mock 函数是否被调用。

总结

使用 Jest 的 Mock 功能可以很容易地模拟自定义属性和对象，尤其是 SVG 属性这样的难以测试的情况。在本文中，我们深入探讨了 Jest Mock 的基本概念，并展示了如何使用 Jest 模拟 SVG 属性。通过使用 Jest Mock，我们可以更好地进行单元测试并构建可维护性高的代码。

示例代码

完整的示例代码如

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651bb81295b1f8cacd358c4f