测试 JavaScript 代码

2025 年 2 月 16 日 | 阅读 9 分钟

引言

测试是编程开发不可或缺的一部分，它确保了代码的可靠性和功能性。在 JavaScript 领域，应用程序变得越来越复杂，因此强大的测试实践至关重要。

无论您是经验丰富的开发人员还是刚刚开始您的旅程，了解如何有效地测试 JavaScript 代码对于交付高质量的软件产品至关重要。本文旨在指导您了解测试 JavaScript 代码的基础知识，涵盖各种方法和工具，以简化您的测试工作流程。

为什么测试 JavaScript 代码？

在深入探讨测试的复杂性之前，我们先来探讨一下为什么它至关重要。测试有几个目的：

及早发现错误： 测试有助于在开发周期的早期发现代码库中的错误和故障，从长远来看可以节省时间和精力。
确保代码质量： 通过编写测试，开发人员为代码质量设定了标准，从而促进了更好的编码实践和实用性。
重构信心： 在重构代码时，测试充当安全网，确保即使在大量更改之后，现有功能也能保持完整。
文档： 编写精良的测试充当活文档，提供了关于代码在各种情况下应如何表现的深入见解。

测试类型

在 JavaScript 测试中，通常使用几种类型的测试，每种都有特定的用途：

单元测试： 这些测试侧重于代码的单个单元，例如函数或模块，将其与应用程序的其余部分隔离开来。单元测试快速可靠，有助于在细粒度级别识别问题。
集成测试： 集成测试验证应用程序不同部分之间的交互，确保协调的组件协同工作。
端到端 (E2E) 测试： E2E 测试模拟真实的客户端场景，与应用程序交互。这些测试验证应用程序从用户输入到输出的流程。
快照测试： 快照测试捕获组件或函数的输出，并将其与保存的快照进行比较。它们对于识别意外更改的 UI 组件特别有用。

测试框架和库

JavaScript 生态系统中有几个测试框架和库可用，每个都满足不同的需求和偏好：

Jest： 由 Facebook 开发，Jest 是一个流行的测试框架，以其简单性和速度而闻名。它内置了模拟、代码覆盖率和快照测试等功能。
Mocha： Mocha 是一个灵活的测试框架，提供了丰富的功能集，用于编写协调和异步测试。它具有高度可定制性，并与各种断言库配合良好。
Jasmine： Jasmine 是另一个流行的测试框架，强调简单性和清晰性。它使用 BDD（行为驱动开发）语法，使测试具有表现力和直观性。
Chai： Chai 是一个断言库，与 Mocha 和 Jasmine 等测试框架无缝协作。它提供了各种断言风格，包括 BDD、TDD（测试驱动开发）和 should/expect 语法。

测试 JavaScript 代码的最佳实践

为了确保有效的测试，请考虑以下推荐实践：

编写清晰的测试用例： 编写清晰描述被测代码预期行为的测试用例。为了进一步提高可读性，请为测试套件和单个测试用例使用不同的名称。
隔离测试依赖项： 在单元测试中，避免依赖外部因素，例如网络请求或数据库关联。使用模拟或打桩将被测代码与其依赖项隔离。
保持测试 DRY（不要重复自己）： 将重复的测试代码重构为可重用函数或实用程序，以保持一致性并减少重复。
自动运行测试： 通过自动化测试执行，将测试整合到您的开发工作流程中。Jenkins、Travis CI 或 GitHub Actions 等持续集成 (CI) 工具可以在每次推送代码更改时自动运行测试。
监控测试覆盖率： 争取较高的代码覆盖率，以确保代码库的关键部分得到充分测试。Istanbul 或 Jest 的内置覆盖率报告等工具可以帮助跟踪测试覆盖率指标。

测试 JavaScript 代码示例

测试 JavaScript 代码对于确保应用程序的可靠性和功能性至关重要。在本节中，我们将探讨五个 JavaScript 代码片段示例及其使用 Jest 测试框架的相关测试用例。这些示例涵盖了从测试简单函数到处理异步操作和模拟外部依赖项的各种场景。

示例 1：简单函数

在此示例中，我们有一个名为 add 的清晰函数，它接受两个数字作为输入并返回它们的总和。相应的测试用例检查该函数是否准确地将两个数字相加，涵盖了不同的输入组合。

代码

 
// Function to add two numbers
function add( a, b ) {
  return a + b;
}   

测试用例

 
// Test for the above add function
test( ' adds two numbers correctly ', () => {
  expect(add( 1, 2 )).toBe( 3 );
  expect(add( -1, 1 )).toBe( 0 );
  expect(add( 0, 0 )).toBe( 0 );
});   

示例 2：异步函数（Promise）

第二个示例测试一个名为 fetchData 的异步函数，该函数返回一个 Promise，该 Promise 旨在在延迟后返回某些数据。测试用例确保 Promise 在预定时间范围内以正常数据解决。

代码

 
// Asynchronous function that returns a promise
function fetchData() {
  return new Promise(( resolve, reject ) => {
    setTimeout(( ) => {
      resolve( ' Data fetched successfully ' );
    }, 1000 );
  });
}   

测试用例

 
// Test for the fetchData function
test(' fetchData resolves with correct data ',  ( ) => {
  return fetchData().then(data => {
    expect(data).toBe( ' Data fetched successfully ' );
  });
});   

示例 3：异步函数 (Async/Await)

与上一个示例类似，此示例测试使用 async/await 语法的异步函数，提供了一种更简洁明了的处理异步操作的方法。测试用例使用 async/await 来等待函数返回的 Promise 的解析，并确认正常结果。

代码

 
// Asynchronous function using async/await syntax
async function fetchData( ) {
  return new Promise( resolve => {
    setTimeout( () => {
      resolve( ' Data fetched successfully ' );
    }, 1000 );
  });
}   

测试用例

 
// Test for the fetchData function using async/await
test( ' fetchData resolves with correct data ', async ( ) => {
  const data = await fetchData( );
  expect(data).toBe( ' Data fetched successfully ' );
});   

示例 4：模拟外部依赖项

在实际应用程序中，JavaScript 函数通常依赖于外部依赖项（如 API）。此示例演示了如何通过模拟 get 函数来测试从外部编程接口 (fetchUserData) 获取数据的函数。通过提供 get 函数的模拟实现，我们可以控制其行为并确保被测函数按预期运行。

代码

 
// Function that fetches user data from an external API
async function fetchUserData( userId ) {
  const response = await fetch(` https://api.example.com/users/${ userId } `);
  const userData = await response.json();
  return userData;
}   

测试用例

 
// Test for fetchUserData function using mock
test(' fetchUserData fetches user data correctly ', async () => {
  const mockUserData = { id : 1, name : ' John ', email : ' john@example.com ' };
  jest.spyOn( global, ' fetch ' ).mockResolvedValue({
    json: jest.fn().mockResolvedValue( mockUserData ),
  });

  const userData = await fetchUserData(1);
  expect( userData ).toEqual( mockUserData );

  global.fetch.mockRestore();
});   

示例 5：快照测试（React 组件）

快照测试是一种有用的方法，用于验证 UI 组件是否长期正确渲染。在此示例中，我们有一个名为 UserProfile 的 React 组件，它显示客户端的配置文件数据。测试用例使用快照测试来捕获组件的渲染输出，并将其与以前保存的快照进行比较，确保对组件 UI 的任何更改都是故意的。

代码

 
// React component to display a user profile
function UserProfile({ username, email }) {
  return (
    <div>
      <h2>{ username }</h2>
      <p> Email : { email } </p>
    </div>
  );
}

测试用例

 
// Snapshot test for the UserProfile component
test( ' renders UserProfile correctly ', () => {
  const tree = renderer.create(< UserProfile username = " John " email = " john@example.com " />).toJSON();
  expect( tree ).toMatchSnapshot();
});   

高级测试策略

除了基础知识之外，还有一些高级测试策略可以进一步提高测试套件的有效性

1. 参数化测试

参数化测试允许您使用不同的输入参数运行相同的测试逻辑。这在测试具有不同输入或边缘情况的函数时特别有用。Jest 和 Mocha 等框架支持参数化测试，使您能够编写简洁而富有表现力的测试套件。

2. 测试数据管理

管理测试数据可能具有挑战性，特别是对于具有复杂数据依赖性的应用程序。考虑使用 Faker.js 或 Chance.js 等工具动态生成合理的测试数据。此外，您可以使用装置或种子数据来确保不同运行之间测试环境的一致性。

3. 突变测试

突变测试是一种技术，其中被测代码被故意更改（突变），然后运行相应的测试以确保它们失败。目标是通过衡量测试套件识别这些突变的能力来评估其有效性。虽然突变测试更高级且计算密集，但它提供了对测试强度的重要见解。

4. 基于属性的测试

基于属性的测试，由 Quick Check（适用于 Haskell）和 Speculation（适用于 Python）等库推广，涉及定义代码应满足的通用属性，并生成随机输入来测试这些属性。这种方法可以揭示使用基于模型的测试无法发现的边缘情况和角落情况。jsverify 和 quickcheck 等 JavaScript 库为基于属性的测试提供了类似的功能。

5. 契约测试

在微服务架构中，服务通过 API 相互通信，契约测试可确保每个服务都符合其使用者的期望。Agreement 等工具通过允许您定义和验证服务之间的契约来支持契约测试，从而确保兼容性并防止分布式系统中的回归。

测试异步代码

JavaScript 本质上是异步的，具有回调、Promise 和 async/await 等功能，使其能够强大地处理异步操作。测试异步代码需要特殊考虑，以确保准确可靠的测试结果

使用 Mock 和 Spy： 在测试与 API 或数据库等外部依赖项通信的异步函数时，使用 Mock 或 Spy 来模拟它们的行为。这允许您控制这些依赖项的响应，并将被测代码与外部因素隔离。
利用计时器： JavaScript 应用程序通常依赖计时器 (setTimeout, setInterval) 进行异步操作。在测试涉及计时器的代码时，考虑使用 Sinon.js 等库来控制测试中的时间流，确保可预测和确定性的行为。
Async/Await 语法： 利用 ES2017 中引入的 async/await 语法以协调的方式编写异步代码。这使得测试异步函数更直接，因为您可以使用 try/catch 块来处理错误和同一函数中的断言。
Promise 链： 在处理 Promise 时，确保您在测试中正确处理 Promise 链。使用 return 语句来链式异步操作，并在继续进行断言之前等待 Promise 的解析。

持续集成和部署 (CI/CD)

将测试整合到您的 CI/CD 管道中对于保持代码质量和确保及时交付更新至关重要。CI/CD 工作流程自动化了构建、测试和部署软件的过程，从而实现了快速周期和反馈循环

自动化测试： 将您的 CI/CD 管道配置为在每次代码更改推送到仓库时自动触发测试。这确保了所有更改在转换为基本代码库之前都经过了全面测试，从而降低了引入错误或回归的风险。
并行测试执行： 为了加快测试过程，考虑在不同的环境或工作程序中并行运行测试。这会分散工作负载并减少总体测试执行时间，从而为开发人员提供更快的反馈。
部署管道： 为不同的环境（例如，开发、阶段、生产）定义单独的部署管道，以确保受控和可预测的部署。使用蓝绿部署或金丝雀发布等策略来最大程度地减少停机时间并降低部署期间的风险。
监控和警报： 使用 Prometheus、Grafana 或 Datadog 等监控工具监控您的 CI/CD 管道和测试套件的健康状况。设置警报以通知利益相关者任何故障或性能下降，从而实现及时的干预和解决。

结论

测试 JavaScript 代码是构建可靠和有效软件应用程序的关键实践。通过利用各种测试策略、框架和最佳实践，开发人员可以在整个开发生命周期中确保其代码库的质量和可靠性。

无论是为单个函数编写单元测试，还是为复杂应用程序编写端到端测试，从一开始就优先考虑测试，从长远来看都会带来回报，从而带来更好的软件产品和更满意的客户。

下一主题JavaScript offsetHeight

测试 JavaScript 代码

引言

为什么测试 JavaScript 代码？

测试类型

测试框架和库

测试 JavaScript 代码的最佳实践

测试 JavaScript 代码示例

示例 1：简单函数

示例 2：异步函数（Promise）

示例 3：异步函数 (Async/Await)

示例 4：模拟外部依赖项

示例 5：快照测试（React 组件）

高级测试策略

1. 参数化测试

2. 测试数据管理

3. 突变测试

4. 基于属性的测试

5. 契约测试

测试异步代码

持续集成和部署 (CI/CD)

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

测试 JavaScript 代码

引言

为什么测试 JavaScript 代码？

测试类型

测试框架和库

测试 JavaScript 代码的最佳实践

测试 JavaScript 代码示例

示例 1：简单函数

示例 2：异步函数（Promise）

示例 3：异步函数 (Async/Await)

示例 4：模拟外部依赖项

示例 5：快照测试（React 组件）

高级测试策略

1. 参数化测试

2. 测试数据管理

3. 突变测试

4. 基于属性的测试

5. 契约测试

测试异步代码