Jest 单元测试不通过:Received number of calls did not match 的解决方法

在进行前端开发时,我们经常需要写单元测试来保证代码的正确性和可靠性。而在使用 Jest 进行单元测试时,有时会遇到一个错误:Received number of calls did not match。这个错误通常是由于函数被调用次数不符合预期而引起的。本文将详细介绍这个错误的原因和解决方法,并提供示例代码供读者参考。

错误原因

在 Jest 中,我们可以使用 jest.fn() 来创建一个模拟函数,用于在测试中替代真实的函数。模拟函数可以跟踪自身的调用情况,包括被调用的次数、传入的参数等等。当我们在测试中期望某个模拟函数被调用特定的次数时,就可以使用 Jest 提供的 matcher toBeCalledTimes() 来进行断言。

例如,我们有一个名为 foo 的函数,我们希望在测试中断言它被调用了 3 次:

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

然而,如果 foo 函数在测试中被调用的次数不符合预期,就会触发 Received number of calls did not match 错误。这个错误的具体表现形式可能有很多种,例如:

  • Expected number of calls: 3 Received number of calls: 2
  • Expected number of calls: >= 3 Received number of calls: 2
  • Expected number of calls: <= 3 Received number of calls: 4

这些错误都表示我们在测试中期望某个模拟函数被调用特定的次数,但实际上它被调用的次数和我们的期望不符合。

解决方法

当我们遇到 Received number of calls did not match 错误时,需要检查以下几点:

1. 测试代码的正确性

首先,我们需要确保测试代码本身的正确性。有时候我们可能会犯一些低级错误,比如:

  • 没有正确地调用被测试的函数;
  • 没有正确地调用模拟函数;
  • 没有正确地设置模拟函数的返回值;
  • 没有正确地使用 Jest 提供的 matcher。

这些错误都可能导致测试失败,从而触发 Received number of calls did not match 错误。因此,我们需要仔细检查测试代码,确保它们的正确性。

2. 模拟函数的正确性

如果测试代码本身没有问题,那么我们需要检查模拟函数的正确性。有时候我们可能会犯一些低级错误,比如:

  • 没有正确地创建模拟函数;
  • 没有正确地设置模拟函数的返回值;
  • 没有正确地调用模拟函数。

这些错误都可能导致模拟函数的行为不符合预期,从而触发 Received number of calls did not match 错误。因此,我们需要仔细检查模拟函数的正确性。

3. 调用次数的正确性

如果测试代码和模拟函数都没有问题,那么我们需要检查调用次数的正确性。有时候我们可能会犯一些低级错误,比如:

  • 没有正确地设置模拟函数被调用的次数;
  • 没有正确地设置模拟函数被调用的参数;
  • 没有正确地调用被测试的函数,从而导致模拟函数没有被调用。

这些错误都可能导致模拟函数的调用次数不符合预期,从而触发 Received number of calls did not match 错误。因此,我们需要仔细检查调用次数的正确性。

4. 调试信息的输出

如果以上步骤都检查过了,但仍然无法解决问题,那么我们可以使用 Jest 提供的调试信息来帮助我们定位问题。我们可以在测试中使用 console.log()debugger 语句来输出调试信息,从而了解程序的执行情况。

示例代码

下面是一个示例代码,演示了如何使用 Jest 进行单元测试,并处理 Received number of calls did not match 错误:

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

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

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

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

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

在这个示例代码中,我们定义了一个名为 foo 的函数,并在测试中使用 Jest 提供的 jest.fn() 来创建一个模拟函数 mockedFoo。我们使用 mockedFoo() 来调用模拟函数,并使用 expect()matcher 来进行断言。在第一个测试中,我们期望模拟函数 mockedFoo 被调用了 3 次,但实际上它只被调用了 2 次,因此触发了 Received number of calls did not match 错误。在第二个测试中,我们期望模拟函数 mockedFoo 被正确地调用了 3 次,并传入了正确的参数。在第三个测试中,我们期望模拟函数 mockedFoo 能够正确地返回指定的值。

总结

在进行单元测试时,我们经常会遇到 Received number of calls did not match 错误。这个错误通常是由于函数被调用次数不符合预期而引起的。在解决这个错误时,我们需要仔细检查测试代码、模拟函数和调用次数的正确性,并使用 Jest 提供的调试信息来帮助我们定位问题。通过认真地分析和处理 Received number of calls did not match 错误,我们可以提高单元测试的可靠性和有效性,从而更好地保证代码的正确性和可靠性。

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


猜你喜欢

  • 遇到 Angular 项目中 RxJS 卡顿 延迟等问题该如何解决呢?

    在 Angular 项目中,RxJS 是一个非常重要的库,它可以让我们更方便地处理异步数据流。但是,有时候我们会遇到 RxJS 卡顿延迟等问题,这给我们的开发和调试带来了很大的困难。

    10 个月前
  • ECMAScript 2017 带来的异步迭代器及其应用

    ECMAScript 2017(也称为 ES8)是 JavaScript 编程语言的一个重要版本,其中引入了许多新的功能和特性。其中一个重要的特性是异步迭代器。在本文中,我们将深入探讨异步迭代器的概念...

    10 个月前
  • Promise 与 async/await 的关系和区别详解

    前言 在前端开发中,异步操作是非常常见的,比如通过 AJAX 获取数据、读取本地文件、操作 DOM 等等。在过去,我们通常使用回调函数来处理异步操作,但是回调函数嵌套过多会导致代码难以维护,因此 Pr...

    10 个月前
  • 实践!如何在项目中使用 Babel 来编写 ES6 和 ES7 代码

    在前端开发中,我们经常需要使用最新的 ECMAScript 特性来提高开发效率和代码质量。然而,不同的浏览器对 ECMAScript 特性的支持程度不同,这就需要我们使用 Babel 来将 ES6 和...

    10 个月前
  • 在 Angular 中的完整依赖注入

    依赖注入是一种设计模式,它通过将依赖项传递给对象,来降低对象之间的耦合性。在 Angular 中,依赖注入是一个核心概念,它使得我们可以更好地管理组件之间的关系。 Angular 中的依赖注入 在 A...

    10 个月前
  • 解决 Material Design 中导航栏由多行变成一行时产生的 UI 显示问题

    Material Design 是 Google 推出的一种设计风格,旨在为用户提供更加简洁、直观和美观的界面设计。在 Material Design 中,导航栏是一个非常重要的组件,它可以帮助用户快...

    10 个月前
  • 如何使用 Vue.js 和 ElementUI 实现自适应布局

    在前端开发中,自适应布局是一个非常重要的概念。在不同的设备上,页面的大小和布局都会发生变化,如果不能很好地适应不同的设备,就会影响用户的体验。Vue.js 和 ElementUI 是两个非常流行的前端...

    10 个月前
  • Flexbox 布局解决开发中的重重问题

    什么是 Flexbox 布局? Flexbox 是一种 CSS 布局模式,可以方便地实现响应式布局、水平垂直居中、等高布局等常见布局需求。Flexbox 布局的核心是容器和项目,容器指的是所有需要布局...

    10 个月前
  • 在 ECMAScript 2019 中使用 Array.prototype.includes()

    在 ECMAScript 2019 中,Array.prototype.includes() 是一个非常实用的新功能。它允许我们轻松地检查一个数组中是否包含一个特定的元素,而不必使用 indexOf(...

    10 个月前
  • 如何使用 Mongoose 从 MongoDB 数据库中查询文档?

    Mongoose 是一个 Node.js 的 MongoDB 驱动程序,它提供了一种更加简单的方式来操作 MongoDB 数据库。在这篇文章中,我们将会介绍如何使用 Mongoose 从 MongoD...

    10 个月前
  • ESLint 强制代码风格

    在前端开发中,代码风格的一致性是非常重要的。如果一个项目中的代码风格杂乱无章,不仅会降低代码的可读性,还会给后期的维护和开发带来很大的困难。为了解决这个问题,我们可以使用 ESLint 工具来强制代码...

    10 个月前
  • CSS Grid 在实现表单布局中常见的问题解决方法

    CSS Grid 是一种强大的布局方式,它可以更加灵活地实现表单布局,但在实践中,我们也会遇到一些常见的问题。本文将介绍一些常见的问题及其解决方法,并提供示例代码。

    10 个月前
  • 深入理解 PWA 的工作原理与应用场景

    什么是 PWA? PWA(Progressive Web App)是一种新型的 Web 应用程序,它结合了 Web 应用程序和原生应用程序的优点,具有离线访问、快速加载、类似原生应用的交互体验等特点。

    10 个月前
  • 如何在 Redux 中正确解决数据刷新问题?

    在前端开发中,我们经常会遇到数据刷新的问题。当用户进行某些操作后,我们需要重新从服务器获取最新的数据并更新到页面上。在 Redux 中,如何正确地解决数据刷新问题是一个非常重要的话题。

    10 个月前
  • 在 Web 应用程序中使用缓存减少响应时间

    随着 Web 应用程序的发展,用户对于响应时间的要求越来越高。而缓存技术可以很好地减少 Web 应用程序的响应时间,提高用户体验。本文将详细介绍在 Web 应用程序中使用缓存的方法和注意事项,并提供示...

    10 个月前
  • Headless CMS 平台评估:构建微服务

    引言 随着互联网技术的发展,前端技术的重要性越来越凸显。前端开发者需要不断地学习新技术,以满足用户对于界面和体验的需求。在开发过程中,我们经常需要使用 CMS 平台来管理网站的内容,但是传统的 CMS...

    10 个月前
  • 解决 Next.js 中引入图片的路径问题

    在 Next.js 中,我们经常需要引入图片来美化页面或者展示产品。但是,由于 Next.js 的特殊性质,有时候我们会遇到一些困难,比如图片路径的问题。在本文中,我将会详细讲解如何解决 Next.j...

    10 个月前
  • 无障碍性测试:使用 UI 自动化测试工具测试网页可访问性

    前言 随着网络技术的发展,越来越多的人使用互联网来获取信息和进行交流。但是,有些人可能面临着种种障碍,比如视力障碍、听力障碍、语言障碍等,导致他们无法正常地使用网页。这时候,无障碍性就变得非常重要了。

    10 个月前
  • SPA 应用中前后端如何协作实现登录验证

    在前端开发中,单页应用(SPA)已经成为了一个非常流行的开发方式。SPA 应用通常使用前端框架来实现页面的渲染和路由控制,同时使用后端 API 来处理数据的增删改查等操作。

    10 个月前
  • 如何在 SASS 中使用 @at-root 规则?

    SASS 是一个强大的 CSS 预处理器,它提供了许多功能,使前端开发更加高效和方便。其中一个很有用的功能是 @at-root 规则,它允许你在嵌套的选择器中跳出当前选择器的作用域,从而避免产生不必要...

    10 个月前

相关推荐

    暂无文章