设置测试环境

为 jQuery 代码编写测试，对于构建稳健且易于维护的 Web 应用程序至关重要。测试有助于及早发现错误，并确保代码按预期运行。

• 防止回归：确保新的更改不会破坏现有功能。
• 提高代码质量：促使您编写模块化且可测试的代码。
• 促进协作：清晰记录各个组件应如何工作。

要测试 JavaScript（包括 jQuery），您需要一个测试运行器。该工具会执行测试并报告结果。

以下是两个常用选项：

• Jest：Facebook 开发的现代化、功能丰富的测试框架，广泛用于 React，也非常适合任何 JS 项目。
• QUnit：专用于 jQuery 的测试框架，比 Jest 更简单，但功能也较少。

本课将重点介绍 Jest 的设置，因为它功能全面且应用广泛。

安装 Jest 之前，您需要先拥有一个 Node.js 项目。如果还没有，可以轻松创建一个。

在终端中进入项目目录，然后运行：

此命令会创建一个 package.json 文件，用于管理项目的依赖项和脚本。

现在，让我们安装 Jest。由于 jQuery 经常与浏览器的 DOM（文档对象模型）交互，因此还需要 jest-environment-jsdom。JSDOM 会在 Node.js 中提供类似浏览器的环境，使您的 jQuery 代码能够操作虚拟 DOM。

将它们作为开发依赖项安装：

这会将 Jest 和 JSDOM 添加到您的 package.json 中。

要让 Jest 使用 JSDOM，需要对其进行配置。您可以在 package.json 中添加 test 脚本，也可以创建一个 jest.config.js 文件。

选项 1：在 package.json 中配置

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

--env=jsdom 标志可确保 Jest 在 JSDOM 环境中运行测试。

Jest 会在 __tests__ 目录中查找测试文件，或查找以 .test.js（或 .spec.js）结尾的文件。让我们创建一个简单的测试文件。

在项目根目录中创建名为 __tests__ 的目录，然后添加一个类似 __tests__/my-feature.test.js 的文件：

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe 用于将相关测试分组，而 test（或 it）用于定义单个测试用例。

要测试 jQuery 代码，需要将 jQuery 本身导入测试文件。您可以通过 npm 安装 jQuery：npm install jquery。

然后，在测试文件中导入它：

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

断言用于验证代码是否按预期运行。Jest 将 expect() 函数与匹配器结合使用来进行断言。

下面是一个简单的 JavaScript 示例（并非 jQuery 专用，但可以展示断言的用法）：

Jest 提供了丰富的匹配器。以下是您将使用的一些常见匹配器：

• .toBe(value)：检查是否完全相等（类似于 ===）。
• .toEqual(value)：检查对象或数组是否深度相等。
• .not.toBe(value)：检查是否不相等。
• .toBeTruthy() / .toBeFalsy()：检查真值或假值。
• .toContain(item)：检查数组或字符串是否包含某个项目。

对于 jQuery，您通常会将这些匹配器与 jQuery 方法结合使用，例如 expect($element.text()).toBe('Expected Text');

设置好测试文件后，运行测试非常简单。只需使用我们在 package.json 中定义的脚本：

Jest 会找到所有测试文件，在 JSDOM 环境中运行它们，并在终端中报告结果。报告会显示哪些测试通过、哪些失败，并提供失败测试的详细信息。

您已经学会了如何使用 Jest 和 JSDOM 为 jQuery 设置测试环境。对于支持 DOM 的基本 Jest 设置，以下哪些命令和配置是必需的？

在本课中，您学习了如何使用 Jest 为 jQuery 应用程序设置稳健的测试环境。

• 使用 npm init 初始化了一个 Node.js 项目。
• 安装了 Jest 和 jest-environment-jsdom，以模拟浏览器环境。
• 在 package.json 中配置 Jest，使其使用 JSDOM。
• 了解了如何组织测试文件、导入 jQuery，以及使用 Jest 匹配器编写基本断言。

这些基础知识使您能够编写有效的测试，确保 jQuery 代码可靠且易于维护。