为什么 Jest 测试失败了?

Jest 是一个非常流行的 JavaScript 测试框架,许多前端开发人员都喜欢使用它进行单元测试、集成测试甚至端到端测试。但是,有时你可能会看到 Jest 测试失败了,甚至找不到问题出在哪里,这是很令人沮丧的。所以,在这篇文章中,我们将解决一些 Jest 测试失败的常见问题,帮助您更快地找到失败原因并解决问题。

1. 错误信息不够清楚

很多时候,Jest 给出的错误信息只是一个调用栈,对于测验代码中的错误而言还是不够明确。有时候,错误信息可能会满屏幕,而很难找到真正的问题所在。例如,以下是一个模糊的错误信息示例:

---------- ------ ---- -------- ----- -- ---------
-- ----------------
-- ------------------ ------------------
-- --------------- ------------------
-- ----------------------------- ------------------
-- ----------- ------------------

这通常是因为 Jest 没有为您提供足够的上下文信息。要解决这个问题,您可以使用 Jest 提供的 --verbose 标志来获取更多的信息。例如:

--- ---- -- ---------

这将会输出更多的详细信息,包括测试名称以及正在运行的测试套件和测试用例的完整列表。当您遇到一个失败的测试时,这些信息可能会非常有用,因为它们将帮助您定位更准确的问题。

2. 使用了异步代码

Jest 默认情况下是同步运行测试用例的,但是当您的测试用例包含异步代码时,您需要告诉 Jest 注意这一点。否则,异步代码可能尚未完成就导致测试失败。为此,您可以使用 Jest 提供的 done 参数或使用 async/await 语法来将测试用例变为异步。

例如,以下是一个包含异步代码的测试用例:

----- -------- ------------ -
  ------ ----- -----------------------
-

--------------------- -- -- -
  ---------------- ----- ------ -- -
    ----- ---- - ----- ----------------
    ---------------------------- --------- ------ ---
    -------
  ---
---

在这个例子中,我们从数据库中查找一个用户,然后断言该用户的用户名是否为 "john"。注意 test 函数是异步的,并且接受一个 done 参数。当我们完成测试用例时,我们需要调用 done() 回调来告诉 Jest 这个测试用例已经完成了。

3. Mock 了错误的函数/对象

在 JavaScript 中,我们经常需要使用第三方库或其他模块,这些模块会影响我们的测试结果。为了避免这种情况,我们可以使用 Jest 提供的 Mock 功能,Mock 这些依赖模块。但是,如果您 Mock 了错误的函数或对象,就可能导致测试失败。

例如,以下代码演示了如何用 Jest Mock axios 库,以便测试异步操作:

------ ----- ---- --------

----- -------- ---------- -
  ------ --------------------
-

---------------------- -- -- -
  ------------ -- -
    ----------------------- -- ------- ----- ----- ---- ----
  ---

  ------------- ---- ---- -- --------- ----- -- -- -
    ----- ------------ - ----------------- ------- -- ----- -------------
    ----- ------------ - - ------ -- ----- ------ -- --
  
    -- ---- ----------- -- ------- ---- -------- ----
    ------------------------------------ ----- ------------ ---
  
    ----- ----- - ----- -----------
  
    ------------------------------------
  ---
---

在这个例子中,我们使用 Jest Mock axios.get() 的方法来处理异步操作,以便在测试中验证我们的代码逻辑是否正确。但是,如果您的 Mock 对象并没有得到正确设置,您的测试可能会失败。在这种情况下,您应该仔细审查您的测试代码,确保 Mock 对象被正确设置。

4. 包含随机因素

在测试中使用随机因素是一个非常不好的习惯。测试应该是可重复的,而随机因素会导致测试结果不可预测。如果您的测试包含随机因素,那么可能与其他测试结果不同,很难找到问题。

例如,以下测试演示了添加随机因素的错误做法:

----------------------- -- -- -
  ---------- ---- -- ------ -- -- -
    ----- ---- - --- -------
    ----- ----- - --------- -------- ---------
    ----- ----------- - ------------------------ - -------------- -- -------- ------ -----
    ----- ---------- - -------------------

    ---------------------------

    -----------------------------------------
  ---
---

在这个例子中,我们在测试中使用 Math.random() 函数生成一个随机索引,然后将其传递给 cart.addToCart() 方法。由于索引是随机生成的,每次测试运行时都可能会产生不同的结果,导致测试失败。因此,在编写测试时,应该避免使用随机因素。

5. 断言不完整或错误

最后,测试用例可能会因为断言不完整或错误而失败。在 Jest 中,断言可以使用许多不同的方法,如 expect()toBe()toMatchObject() 等。如果您的断言不正确或不完整,那么测试就会失败。

例如,以下测试示例演示了如果断言不完整或错误的问题:

-------------------------------- -- -- -
  -------------- ----- ---- -- ----- ------ -- -- -
    ----- ------ - ---------------------------------

    --------------------------------- -- ------
    ------------------------------------- -- -----
  ---
---

在这个例子中,我们正在测试一个将 snake case 转换为 camel case 的函数。由于我们使用了错误的断言方法,导致测试存在问题。 toBe() 方法用来比较值是否完全相等,而 toEqual() 方法则用来比较对象是否部分相等。在这个例子中,我们应该使用 toEqual() 断言方法。

结论

在 Jest 测试中,测试用例失败是一件非常常见的事情。然而,对于每个失败,都有一个解决方案。在这篇文章中,我们涵盖了最常见的问题,并提供了相应的解决方案。使用这些技巧,您应该能够更快地找到失败的原因并解决问题,帮助您编写更可靠的代码。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67132697ad1e889fe20acf41


猜你喜欢

  • 使用 Karma 和 Mocha 对 Angular 应用程序进行浏览器端和服务器端的测试

    在前端开发中,测试是非常重要的一环,特别是在对于 Angular 应用程序的开发中。Karma 和 Mocha 是两个非常流行的 JavaScript 测试框架,可以帮助我们对 Angular 应用程...

    7 天前
  • 使用 jQuery 进行响应式设计的技巧

    随着移动设备的盛行,越来越多的网站开始实现响应式设计,以便在不同屏幕尺寸下都能良好的展现页面。在前端开发中,jQuery 是一种非常常用的 JavaScript 库,它具有简单易用和强大灵活的特性,让...

    7 天前
  • Hapi.js 中如何实现 OAuth2.0 授权

    OAuth2.0 是一种用于安全验证和授权的协议,可以授权其他应用程序使用用户账户的资源,且不会将密码透露给第三方应用程序。在 Hapi.js 中,我们可以使用 hapi-auth-oauth2 插件...

    7 天前
  • CSS Grid 中实现图片列表均分排列的技巧和方法

    CSS Grid 是一个强大的布局模式,可以用于创建复杂的布局,比如网格、卡片布局和响应式布局等。在实现图片列表均分排列时,CSS Grid 可以提供非常大的帮助和便利。

    7 天前
  • TypeScript 中的高级类型:一份完整的入门指南

    TypeScript 是一种静态类型的编程语言,它是 JavaScript 的超集,为 JavaScript 带来了许多强类型支持、面向对象编程的特性。随着 TypeScript 不断推广和普及,越来...

    7 天前
  • Redux 如何处理 WebSocket 的异步数据

    在现代 Web 应用程序中,网络连接和实时数据已经成为了基本需求。WebSockets 技术能够让我们在客户端和服务端之间建立一个双工通信的管道。这个管道能够让服务器和客户端更好地协同工作。

    7 天前
  • 如何解决 PWA 应用在某些浏览器中无法安装的问题?

    PWA(Progressive Web Apps)是一种被广泛使用的 web 应用程序模型,它通过使用现代的网络 API 和技术来提供 app-like 的用户体验。

    7 天前
  • 在 Polymer 中使用 Custom Elements 和 Shadow DOM 创建可复用组件

    Polymer 是一个 Web 组件库,它使用 Custom Elements 和 Shadow DOM 等浏览器提供的 Web 标准实现了可复用的 Web 组件。

    7 天前
  • Kubernetes 状态化服务的实现

    Kubernetes 是一个优秀的容器编排平台,它在容器管理、自动伸缩、负载均衡等方面都有着很好的表现。但是,在实际应用场景中,我们常常需要管理一些有状态的服务,比如数据库、消息队列等,这时需要使用状...

    7 天前
  • 使用 Koa 框架进行微服务开发的指南

    随着云计算和移动互联网的兴起,微服务架构已经成为了一种趋势。微服务架构将应用程序拆分成小的、松耦合的服务,大大提高了应用程序的灵活性和可维护性。而Koa作为一款轻量级的 Node.js 框架,它的架构...

    7 天前
  • 如何在 Enzyme 测试中使用 Snippet 来 Mock 少数关键代码

    前言 在前端开发工作中,测试是不可或缺的一部分。Enzyme 是一个非常优秀的 React 组件测试工具,可以帮助我们快速编写和运行测试用例。然而,有些情况下我们可能需要 Mock 掉一些关键代码,以...

    7 天前
  • ES9 中的 Optional Chaining 操作符现已可用

    ES9 中的 Optional Chaining 操作符现已可用 在编写 JavaScript 代码时,经常遇到需要同时访问对象属性和方法的情况,而这些对象的某些属性或方法可能未被定义。

    7 天前
  • 在 Kubernetes 上构建 Headless CMS 应用:使用 Helm Chart

    前言 随着云计算技术的快速发展,Kubernetes 逐渐成为了容器化应用的标准建设平台。在 Kubernetes 上,我们可以高效地构建、发布和管理应用程序,并且支持快速的横向扩展和自动化运维。

    7 天前
  • ES7 中的 Object.getOwnPropertySymbols 方法解决对象属性安全性问题

    在前端开发中,对象属性安全性一直是一个重要的话题。例如,有时候我们希望某些属性不被修改或者删除,但是常规的属性访问方式(. 或 [ ])不支持这种需求。ES7 引入了 Object.getOwnPro...

    7 天前
  • 解决 Babel 在编译 ES6 类继承时的问题

    背景 在开发前端项目时,我们通常会使用 ES6 的语法规范,其中包含了类的定义和继承等特性。但是在使用 Babel 进行编译时,有时会遇到类继承的问题,可能会出现一些令人困惑的错误。

    7 天前
  • 实现多任务模式的无障碍设备应用程序

    无障碍设备指的是那些能让身体或者精神上存在障碍的人们更容易使用电子设备的用户界面和交互方式的设备。在现代社会,无障碍设备已经成为必须。然而,一些用户还存在多任务模式的问题,即在一个应用程序中同时处理多...

    7 天前
  • 如何在 Express.js 中使用 Mongoose 操作 MongoDB 数据库

    简介 MongoDB 是一种非关系型的文档数据库,而 Mongoose 是一种 Node.js 中广泛使用的对象模型库,它允许我们在 MongoDB 数据库上执行数据操作。

    7 天前
  • 如何在 Sequelize 中实现数据加密和数据解密

    随着数据泄露事件的不断发生,数据加密和数据解密成为了一种必要的手段来保护数据的安全性。在前后端分离的 Web 应用程序中,Sequelize 是一个流行的 Node.js ORM,提供了一种方便的方法...

    7 天前
  • Web Components 应用的实现方法与技术选型

    随着前端技术的不断发展,Web Components 成为了一个热门话题。它是一个标准化的浏览器能够原生支持的组件技术,能够允许开发人员创建自定义组件并可以在多个网站和项目中共享。

    7 天前
  • Docker 镜像仓库的使用方法

    Docker 是一种流行的容器化技术,通过它我们可以轻松快捷地部署和运行应用程序。Docker 镜像是一个轻便、可移植的容器,可以在不同的环境中运行,而 Docker 镜像仓库则是一种存储和分发 Do...

    7 天前

相关推荐

    暂无文章