”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 Jest 测试您的 JavaScript 应用程序

使用 Jest 测试您的 JavaScript 应用程序

发布于2024-09-01
浏览:318

Test Your JavaScript App With Jest

测试是软件开发的关键部分,可确保您的应用程序按预期运行。 Jest 是 JavaScript 生态系统中最流行的测试框架之一。 Jest 由 Facebook 开发,以其简单易用而闻名,使其成为初学者和经验丰富的开发人员的绝佳选择。

开始使用 Jest

在我们深入示例之前,让我们在您的项目中设置 Jest。如果尚未安装,可以使用 npm 安装它:

npm install --save-dev jest

接下来,将测试脚本添加到您的 package.json 中:

"scripts": {
  "test": "jest"
}

现在您已经准备好编写一些测试了!
让我们创建一个简单的函数来测试。创建一个名为 math.js 的文件:

// math.js
function add(a, b) {
  return a   b;
}
module.exports = add;

现在,让我们为这个函数编写一个测试。创建一个名为 math.test.js 的文件:

// math.test.js
const add = require('./math');

test('adds 1   2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

在这个测试中,我们使用测试函数来定义测试用例。 Expect函数用于断言add(1, 2)的结果等于3。

运行测试

您可以通过在终端中执行以下命令来运行测试:

npm test

您应该看到表明您的测试已通过的输出。

测试异步代码

Jest 还支持测试异步代码。让我们修改 math.js 文件以包含异步函数:

// math.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('peanut butter');
    }, 1000);
  });
}

module.exports = { add, fetchData };

现在,让我们为 fetchData 编写一个测试:

// math.test.js
const { add, fetchData } = require('./math');

test('adds 1   2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

在此测试中,我们将测试函数标记为异步并使用await 等待promise 解析。

模拟函数

Jest 提供了强大的模拟功能。假设您有一个进行 API 调用的函数。您可以模拟此函数以在测试期间控制其行为。
这是一个例子:

// api.js
const axios = require('axios');

async function getUser() {
  const response = await axios.get('https://api.example.com/user');
  return response.data;
}

module.exports = getUser;

您可以在测试中模拟 axios:

// api.test.js
const axios = require('axios');
const getUser = require('./api');

jest.mock('axios');

test('fetches user data', async () => {
  const user = { name: 'John Doe' };
  axios.get.mockResolvedValue({ data: user });

  const result = await getUser();
  expect(result).toEqual(user);
});

在此测试中,我们模拟 axios.get 方法以返回预定义的响应,从而允许我们在不进行实际 API 调用的情况下测试 getUser。

Jest 是一个功能强大的测试框架,可以轻松为 JavaScript 应用程序编写和运行测试。凭借其简单的语法、对异步代码的支持以及内置的模拟功能,Jest 可以帮助您确保代码的可靠性和可维护性。立即开始将 Jest 集成到您的项目中,享受自动化测试的好处。

版本声明 本文转载于:https://dev.to/jospin6/test-your-javascript-app-with-jest-314c?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 我可以将行追加到 CSV 文件而不覆盖它吗?
    我可以将行追加到 CSV 文件而不覆盖它吗?
    在 Python 中向现有 CSV 文件追加新行:一种更有效的方法当您需要使用附加行更新 CSV 文件时,您可能会考虑以下问题:问: 是否可以向现有 CSV 文件添加新行,而无需覆盖和重新创建文件?答: 绝对!以下是将行追加到 CSV 文件的更有效方法:您可以利用Python 中的 with 语句。...
    编程 发布于2024-11-06
  • Nestjs、Firebase、GCloud。如何在 TypeScript 中快速设置 API 后端。
    Nestjs、Firebase、GCloud。如何在 TypeScript 中快速设置 API 后端。
    It's great that you decided to open this article. My name is Fedor, and I've been a full-stack developer on a permanent basis since the end of 2021. J...
    编程 发布于2024-11-06
  • 如何在维护异步操作的同时避免链式函数中的 jQuery Promise?
    如何在维护异步操作的同时避免链式函数中的 jQuery Promise?
    在链式函数中回避 jQuery Promise尽管建议避免 jQuery Promise,但开发人员在不使用 jQuery 的情况下链接异步 jQuery 函数时可能会面临挑战Promise 处理机制,如 .then() 或 .when()。为了解决这个问题,请考虑以下方法:jQuery Promi...
    编程 发布于2024-11-06
  • 为什么“repr”方法在 Python 中至关重要?
    为什么“repr”方法在 Python 中至关重要?
    探索repr方法的意义在Python编程的上下文中,repr 方法在将对象表示为字符串方面起着关键作用。这种简洁而详细的表示有多种用途:repr的目的方法:repr的主要目标方法的目的是返回一个对象的字符串表示形式,该对象既是人类可读的,而且重要的是,是明确的。这种表示应该足以重新创建具有相同状态和...
    编程 发布于2024-11-06
  • 每个开发人员都应该了解可扩展和高效应用程序的顶级 React 设计模式
    每个开发人员都应该了解可扩展和高效应用程序的顶级 React 设计模式
    随着 React 继续主导前端生态系统,掌握其设计模式可以显着提高应用程序的效率和可扩展性。 React 设计模式提供了组织和构建组件、管理状态、处理 props 和提高可重用性的最佳实践。在本博客中,我们将探讨一些关键的 React 设计模式,这些模式可以使您的开发过程从优秀走向卓越。 ...
    编程 发布于2024-11-06
  • 在 React 中构建无限滚动组件
    在 React 中构建无限滚动组件
    介绍 我们在应用程序和网页中看到无限滚动,尤其是希望我们滚动的社交媒体。虽然无意识地滚动不好,但构建自己的无限滚动是很棒的。作为开发人员,我们应该尝试重新创建我们在网上冲浪时看到的组件。它可以挑战您在实现某些组件时了解更多信息并跳出框框进行思考。 此外,如果您希望在应用程序中实现无...
    编程 发布于2024-11-06
  • 在 React 中构建响应式会议图块的动态网格系统
    在 React 中构建响应式会议图块的动态网格系统
    In the era of remote work and virtual meetings, creating a responsive and dynamic grid system for displaying participant video tiles is crucial. Inspi...
    编程 发布于2024-11-06
  • 使用 Spring Boot 和 Spring Cloud 开发微服务
    使用 Spring Boot 和 Spring Cloud 开发微服务
    微服务架构已成为构建可扩展和模块化系统的流行解决方案。通过微服务,您可以将单一应用程序分解为更小的、独立的和专业的服务,这使得系统的维护和发展变得更加容易。在这篇文章中,我们将探讨如何使用 Spring Boot 和 Spring Cloud 创建健壮且高效的微服务。 微服务简介 微服务背后的主要思...
    编程 发布于2024-11-06
  • 克服 PHP DOM XML 解析中的挑战:问题和解决方案
    克服 PHP DOM XML 解析中的挑战:问题和解决方案
    简化 PHP DOM XML 解析:揭开要点当您浏览 PHP DOM 函数的复杂性时,可能会出现某些障碍。为了解决这些挑战,让我们开始了解 DOM 的复杂性,并找出常见问题的解决方案。问题 1:使用 xml:id 驯服 ID当使用 ID 来防止树中出现重复页面时,PHP 的 DOM 遇到了一个难题:...
    编程 发布于2024-11-06
  • 密码重置功能:使用 OTP 重置密码
    密码重置功能:使用 OTP 重置密码
    后端 2. 重置密码 转向下一个 API。 PUT 上 /api/reset-password, req -> otp, email, 新密码, res -> nocontent // controllers/passwordReset.go func ResetP...
    编程 发布于2024-11-06
  • 如何从全局站点包继承 Virtualenv 中的特定包?
    如何从全局站点包继承 Virtualenv 中的特定包?
    从全局站点包继承 Virtualenv 中的特定包为了增强虚拟环境 (virtualenv) 的功能,您可能希望从全局站点继承特定包站点包目录。这种方法允许您有选择地将重要的库合并到您的 virtualenv 中,而无需直接安装它们。继承方法要实现这种继承,请使用以下命令创建一个新的 virtual...
    编程 发布于2024-11-06
  • 如何解决 EF6 中的“找不到 'MySql.Data.MySqlClient\'\”错误?
    如何解决 EF6 中的“找不到 'MySql.Data.MySqlClient\'\”错误?
    MySQL 实体框架的提供程序注册使用 MySQL 和实体框架时,您可能会遇到错误“找不到 Entity Framework 提供程序” 'MySql.Data.MySqlClient' ADO.NET 提供程序。”尽管安装了最新的 MySQL 连接器,您可能仍然会遇到此问题。出现此...
    编程 发布于2024-11-06
  • 如何利用PHP防止邮件传输中的恶意输入?
    如何利用PHP防止邮件传输中的恶意输入?
    保护电子邮件传输的用户输入在 PHP 中,必须在发送电子邮件之前清理用户输入,以防止恶意或有害内容泄露你的系统。考虑下面的简单 PHP 邮件脚本的代码片段:<?php $to = "[email protected]"; $name = $_POST['name']; $m...
    编程 发布于2024-11-06
  • 应用页面开发
    应用页面开发
    Если посмотреть на исходный проект, то можно увидеть, что нам необходимо создать одну главную страницу. Результаты поиска авиабилетов, отелей и туров ...
    编程 发布于2024-11-06
  • Java 应用程序中的“No X11 DISPLAY Variable”错误:如何为 GUI 功能设置 DISPLAY 变量?
    Java 应用程序中的“No X11 DISPLAY Variable”错误:如何为 GUI 功能设置 DISPLAY 变量?
    Java 应用程序中的“No X11 DISPLAY Variable”错误Java 应用程序依赖于 X Window 系统 (X11) 来实现图形用户界面 ( GUI)功能。 “未设置 X11 DISPLAY 变量”错误表示应用程序无法访问 X11 显示环境。要解决此问题,请设置 X11 DISP...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3