首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在jest mock中使用原始函数会导致无限循环

的问题是因为在mock函数中调用了原始函数,而原始函数又会调用mock函数,从而形成了无限循环。

为了解决这个问题,可以使用jest的mock功能来模拟原始函数的行为,而不是直接调用原始函数。具体步骤如下:

  1. 使用jest的mock函数来创建一个模拟函数,可以使用jest.fn()或jest.mock()来创建。
  2. 在测试用例中,将原始函数替换为模拟函数,可以使用jest.spyOn()来实现。
  3. 在测试用例中,使用模拟函数来验证函数的调用情况和返回值。

以下是一个示例代码:

代码语言:txt
复制
// 原始函数
function fetchData() {
  // 实际的数据获取逻辑
}

// 测试用例
test('fetchData should be called', () => {
  // 创建模拟函数
  const mockFetchData = jest.fn();

  // 将原始函数替换为模拟函数
  jest.spyOn(global, 'fetchData').mockImplementation(mockFetchData);

  // 调用被测试的函数
  fetchData();

  // 验证模拟函数的调用情况
  expect(mockFetchData).toHaveBeenCalled();
});

在上述示例中,我们使用了jest.fn()来创建一个模拟函数mockFetchData,并使用jest.spyOn()将原始函数fetchData替换为模拟函数。然后,在测试用例中调用fetchData函数,并使用expect(mockFetchData).toHaveBeenCalled()来验证模拟函数是否被调用。

这样,我们就可以避免在jest mock中使用原始函数导致的无限循环问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jest单元测试之旅—实践总结

下面会根据各种场景进行分析 二、异步函数 我们实际开发我们遇到很多异步函数,但是因为Jest进行测试时,默认情况下一旦到达运行上下文底部当前测试立即结束,这样意味着测试将不能按照我们的预期进行,...我们难免遇到使用setTimeout\setInterval,刚刚在异步用例wait函数其实就是通过setTimeout进行包装的,这个示例我们重点分析应该如何测试定时器。...这意味着模块模拟不会包装原始模块,它会完全替换require系统原始模块。因此,mockRestore可以模拟模块的模拟函数上定义,但是调用它不会恢复原始实现。...这里分别使用jest.spyOn和jest.Mock两个方式对同一个方法进行3种不同编写方式的测试,实际情况我们应该选择合适的方法。...因为测试我们可能多次用到,为了避免重复的代码,这里我们使用了beforeAll进行处理,与之对应的是afterAll。它们两的作用主要是文件内所有测试开始或结束前执行的钩子函数

10.2K20

原生 canvas 如何实现大屏?

由于项目 package.json 里面有限制包版本(最新版本的 G6 导致 OOM,官方短时间能应该会修复),如果使用的 yarn 或 npm 的话,改为对应的 resolutions 即可。...可能大家会想到 useMemo``useCallback等手段,这里要介绍的是 React 官方的 cache 方法,已经 React 内部使用,但未暴露。...项目里面在做 circle 动画的时候使用了,因为该动画是绕圆周无限循环的,当循环过一周之后,后的动画和之前的完全一致,没必要再次计算对应的 circle 坐标,所以我们使用了 cache ,位于src...单测 这里不想多说,大家可以运行 pnpm test看看效果,环境已经搭建好;由于项目里面用到了 canvas 所以需要 mock 一些环境,这里的 mock 可以理解为“我们前端代码跑浏览器里运行,...依赖了浏览器环境以及对应的 API,但由于单测没有跑浏览器里面,所以需要 mock 浏览器环境”,例如项目里面设置的 jsdom、jest-canvas-mock 以及 worker 等,更多推荐直接访问

13920

【总结】1796- 原生 canvas 如何实现大屏?

由于项目 package.json 里面有限制包版本(最新版本的 G6 导致 OOM,官方短时间能应该会修复),如果使用的 yarn 或 npm 的话,改为对应的 resolutions 即可。...可能大家会想到 useMemo``useCallback等手段,这里要介绍的是 React 官方的 cache 方法,已经 React 内部使用,但未暴露。...项目里面在做 circle 动画的时候使用了,因为该动画是绕圆周无限循环的,当循环过一周之后,后的动画和之前的完全一致,没必要再次计算对应的 circle 坐标,所以我们使用了 cache ,位于src...单测 这里不想多说,大家可以运行 pnpm test看看效果,环境已经搭建好;由于项目里面用到了 canvas 所以需要 mock 一些环境,这里的 mock 可以理解为“我们前端代码跑浏览器里运行,...依赖了浏览器环境以及对应的 API,但由于单测没有跑浏览器里面,所以需要 mock 浏览器环境”,例如项目里面设置的 jsdom、jest-canvas-mock 以及 worker 等,更多推荐直接访问

20140

前端自动化测试实践03—jest异步处理&mock

: true,程序自动 mocks 文件夹下找同名文件,省去了手动调用 jest.mock('..../mock'); 4. mock - function 模拟函数调用 对于单元测试,无需关心外部传入的函数的实现,使用 jest.fn 生成一个 mock 函数,可以捕获函数的调用和返回结果,以及this.../mock' test('测试 callback', () => { // 【1】使用 jest 生成一个 mock 函数 func1,用来捕获函数调用 const func1 = jest.fn...- function 模拟 class 函数 对于单元测试,外部 class 的实现无需关心,使用 jest.fn 生成一个 mock 类,例如测试 mock.js export const createObject.../es6-class') jest.mock 如果发现是一个类,自动把构造函数和方法变成 jest.fn() 以提升性能,相当于执行了 const Util = jest.fn() Util.a =

5K85

使用Jest测试包含setTimeout调用的函数踩坑记录

前两天给一个包含setTimeout调用的函数写单元测试,使用fake timer的时候遇到了问题,记录一下。...猜测和JS的事件循环有关,于是我去搜索了相关资料: JS中有一个“事件循环”,JS运行时每一轮Tick时,都会检查事件队列是否有回调,如果有那么就会将它取出并执行。...),因此我们测试用例的setTimeout先于enqueueJobcatch回调的setTimeout被调用,因此expect(job.run).toHaveBeenCalledTimes(2)...根据Jest的官方文档,调用这个函数后,所有队列的“微任务”都会被立刻执行,这里的目的就是保证catch回调能被立刻调用; 使用jest.advanceTimersByTime(6000)代替await...注意我们此时使用的是fake timer,因此是无法使用await delay(0)这个方案的,因此这会导致我们的测试用例等待setTimeout被回调,而fake timer的setTimeout又在等待

6.6K60

JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

之前的两篇教程,我们学会了如何去测试最简单的 React 组件。实际开发,我们的组件经常需要从外部 API 获取数据,并且组件的交互逻辑也往往更复杂。...编写 axios 模块的 mock 文件 Jest 支持对整个模块进行 Mock,使得组件不会调用原始的模块,而是调用我们预设的 Mock 模块。...打开 TodoList 的测试文件,首先在最前面通过 jest.mock 配置 axios 模块的 Mock(确保要在 import TodoList 之前), Mock 之后,无论测试还是组件中使用的都将是...首先通过 jest.spyOn,我们便可以监听一个函数使用情况,然后使用配套的 toBeCalled Matcher 来判断该函数是否被调用。整体代码十分简洁,同时也保持了很好的可读性。...是 post 函数发送结果的数组,通过使用它,我们可以得到返回的 promise,我们可以从 value 属性取到这个 promise。

4.7K20

Jest基本使用方法以及mock技巧介绍

注意:jest自动搜索路径下面所有test.js结尾的文件, 默认都会执行。 如果想单独运行某个测试文件可以直接加上文件名就可以。...2  Jestmock技巧介绍 2.1  基本的mock 2.1.1  Mock一个函数 方法的mock 非常简单,使用jest.fn 就可以非常简单的mock一个函数。...如下面的例子:代码里面有一个函数叫forEach。 ? 此函数可以简单使用下面方法mock,并且jest提供一些方法可以确保查看mock函数被调用的情况: ?...2.2.2  jest.mock()直接在单元测试里面mock 模块 例如我们很多产品代码里面会使用fs文件读取文件, 单元测试, 我们并不需要真去调用fs读取文件, 就可以考虑把fs模块mock掉...如下面的例子,使用mock之后,随时可以使用。 ?

8.2K50

Vue 应用单元测试的策略与实践 02 - 单元测试基础

同一个文件夹创建一个 math.test.js 文件,在这里我们将使用 Jest 来测试 math.js 定义的函数: const { sum } = require('....如果你希望单元测试所测试的 Order 模块是独立的,那么你就不想直接使用真正的 Product 或 Customer Class,因为 Customer Class 的错误会直接导致 Order Class...相反,你可能会使用一个替身作为依赖的对象,也就是我们接下来提到的 Fake/Stub/Mock/Spy。...}; }); }); 我们可以看到 jest.mock() 方法的第二个参数是一个函数,那么我们就可以完全接管整个 ....保持单元测试独立性的同时,也是促使你去思考什么样的模块才是符合「职责单一原则」的。单元测试站在使用者的角度来使用该模块,而代码的易测性也就代表着代码的可维护性。 如何测试异步代码?

2.2K20

JestMock网络请求

JestMock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得单元测试中比较麻烦的就是测试网络请求,所以记录一下Mock...描述 文中提到的示例全部 jest-axios-mock-server仓库 ,直接使用包管理器安装就可以启动示例,例如通过yarn安装: $ yarn install package.json中指定了一些命令...,Jest启动时会进行编译,在这里将这个库mock掉后,所有之后引入这个库的文件都是获得mock后的对象,也就是说我们可以认为这个库已经重写了,重写之后的方法都是JESTMock Functions...提供了一种可以直接实现被Mock函数库的方式,当然实际上Jest还提供了mockImplementation的方式,这个是demo3使用的方式,在这里我们重写了被mock函数库,实现的时候也可以使用...jest.fn完成Implementations,这里通过返回之前写入了一个hook函数,并且各个test时再实现断言或者是指定返回值,这样就可以解决上述问题,实际上就是实现了JestMock Functions

3.3K30

那些年错过的React组件单元测试(上)

Mock 介绍jestmock之前,我们先来思考一个问题:为什么要使用mock函数项目中,一个模块的方法内常常会去调用另外一个模块的方法。...单元测试,我们可能并不需要关心内部调用的方法的执行过程和结果,只想知道它是否被正确调用即可,甚至会指定该函数的返回值。这个时候,mock的意义就很大了。...jestmock相关的api主要有三个,分别是jest.fn()、jest.mock()、jest.spyOn()。使用它们创建mock函数能够帮助我们更好的测试项目中一些逻辑较复杂的代码。...我们测试也主要是用到了mock函数提供的以下三种特性: 捕获函数调用情况 设置函数返回值 改变函数的内部实现 下面,我将分别介绍这三种方法以及他们实际测试的应用。...jest.fn() jest.fn()是创建mock函数最简单的方式,如果没有定义函数内部的实现,jest.fn()返回undefined作为返回值。

4.9K20

Jest + React Testing Library 单测总结

2.3 Jest Mock 查看官方文档的时候,Jest 匹配器还有一类匹配器专门用来检查 Jest Mock 函数的。...所以,Jest Mock 的意义就在于可以帮助我们完成下面这些事情: 有些模块可能在测试环境不能很好地工作,或者对测试本身不是很重要,使用虚拟数据来 mock 这些模块,可以使你为代码编写测试变得更容易...2.3.1 jest.fn() 通过 jest.fn(implementation) 可以创建 mock 函数。如果没有定义函数内部的实现,mock 函数返回 undefined。...// 定义一个 mock函数,因为没有函数体,所以 mockFn return undefined const mockFn = jest.fn(); // mockFn 调用 mockFn(...3.1 render & debug 测试用例渲染内容,可以使用 RTL 库的 render,render 函数可以为我们测试用例渲染 React 组件。

4.5K20

JestMock网络请求

描述# 文中提到的示例全部 jest-axios-mock-server仓库 ,直接使用包管理器安装就可以启动示例,例如通过yarn安装: Copy$ yarn install package.json...使用了JSDOM模拟的浏览器环境,jest.config.js配置的setupFiles属性配置了启动文件test/config/setup.js,在此处初始化了JSDOM。...操作,Jest启动时会进行编译,在这里将这个库mock掉后,所有之后引入这个库的文件都是获得mock后的对象,也就是说我们可以认为这个库已经重写了,重写之后的方法都是JESTMock Functions...提供了一种可以直接实现被Mock函数库的方式,当然实际上Jest还提供了mockImplementation的方式,这个是demo3使用的方式,在这里我们重写了被mock函数库,实现的时候也可以使用...jest.fn完成Implementations,这里通过返回之前写入了一个hook函数,并且各个test时再实现断言或者是指定返回值,这样就可以解决上述问题,实际上就是实现了JestMock Functions

2.6K30

单元测试

它提供了一组用于编写可靠和可维护的测试的实用函数和工具。 jest-location-mock 用于 Jest 测试模拟浏览器window.location对象的库。...(已默认引入,不需要手动再次引入) jest-canvas-mock 用于测试环境模拟 HTML5 Canvas。.../index'; // 这种mock方式需要团队内评审,因为当store中新增方法时,此处mock也需要同步修改,否则可能导致报错:store下方法找不到 jest.mock('../.....网页地址 describe("网页地址的Mock", () => { test("可以获取当前网址的查询参数对象", () => { // 使用 jest-location-mock (本包配置已配置...,会出现报错 这种情况通常是由于一组测试用例,前一个测试用例没有正确地清理或重置测试环境,导致后续的测试无法找到期望的元素或状态。

15910

前端单元测试之Jest

,并且开发测试期间使用,用于判断某些逻辑条件下执行某种预期的结果。...这里列举4个主要的生命周期勾子: afterAll(fn, timeout): 当前文件的所有测试执行完成后执行 fn, 如果 fn 是 promise,jest 等待timeout 毫秒,默认 5000...mock测试就是测试过程,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便继续进行测试的测试方法。...Mock函数通常会提供以下三种特性: 捕获函数调用情况; 设置函数返回值; 改变函数的内部实现; jest.fn() jest.fn()是创建Mock函数最简单的方式,如果没有定义函数内部的实现,jest.fn...)生成一个mock函数 const fn = jest.fn(); foreach([1, 2, 3], fn); //测试mock函数被调用了3次

2.6K20

【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门

---- 单元测试 单元测试其实在我的实际开发并没有用到过,但却经常听说,接下来进行单元测试的学习 Jest 和 Vue Test Utils 的基础和进阶全覆盖 TDD,测试驱动开发,一种全新的开发方式...Mock 的几大功能 创建 mock function,测试中使用,用来测试回调 手动 mock,覆盖第三方实现,狸猫换太子 三大 API 实现不同粒度的时间控制 函数测试 function mockTest...,因为并没有 mock 函数的实现,所以默认为 undefined。...(name); }) }) 结果输出了 Bret 接下来使用 jest 进行第三方模块 axios 的 mock const getUserName = require('....,造成大量重复的工作,可以根目录下新建 __mocks__ 文件夹, 然后新建需要 mock 的模块同名文件 axios.js,jest 自动对这个文件夹下的文件进行处理。

1.3K20

干货 | 携程租车React Native单元测试实践

Mock函数 单元测试,有许多对象或函数并不需要真实的引用,因此需要mock。...比如之前提到的初始化文件jest.setup.js,我们mock一些对象: jest.useFakeTimers(); //mock时间 jest.mock('...._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 使用React或者React Native时通常会使用Redux进行状态的管理,需要mock store...语句覆盖率(statement) 分支覆盖率(branches) 函数覆盖率(functions) 行覆盖率(lines) 同时我们配置huskycommit或者push之前添加钩子,在这些动作之前强制执行单元测试...携程租车前端单元测试的实践,我们总结出几个要点: 将待测试的组件当成黑盒,不用考虑内部逻辑实现; UI改动频繁,优先保证公用组件,工具函数,核心代码的单元测试; 模拟数据尽量真实; 多考虑边界条件情况

5.9K30

Jest 单元测试快速上手指南

你可以完善测试用例, 或者可能有些文件(譬如 config)和代码分支并不需要测试, 可以将其测试覆盖率结果中排除, 参考如下配置 忽略目录下所有文件 jest.config.js 添加 collectCoverageFrom...开头的表示忽略与其匹配的文件 忽略单个文件 该文件顶部添加 /* istanbul ignore file */ 忽略一个函数, 一块分支逻辑或者一行代码 函数, 分支逻辑或者代码行的上一行添加...linaria 是通过 babel 插件将其预编译为 class 名的, 这里可以 mock 一下 css 函数, 返回一个随机值作为 class 名 根目录创建 jest.setup.js jest.mock...我们可以使用 Mock Functions[4] 对其进行 mock // test/mock.spec.ts import { mocked } from 'ts-jest/utils'; import.../docs/en/mock-functions#mocking-modules mock 环境变量和命令行参数 有的模块从环境变量和命令行参数取值, 并且可能是模块初始化时获取的 // process.ts

3.3K30

前端单元测试那些事

目前除了 Facebook 外,Twitter、Airbnb 也使用 JestJest 除了基本的断言和 Mock 功能外,还有快照测试、实时监控模式、覆盖度报告等实用功能。...(); }); afterEach(() => { jest.clearAllTimers(); }); 3.5.4 mock函数 三个与 Mock 函数相关的...API,分别是jest.fn()、jest.spyOn()、jest.mock() jest.fn() - 是创建Mock函数最简单的方式,如果没有定义函数内部的实现,jest.fn()返回undefined...() - jest.mock 自动根据被 mock 的模块组织 mock 对象。...对象执行了回调函数 注:有时候会存在一种情况,同个组件调用同个方法,只是返回值不同,我们可能要对它进行多次不同的mock,这时候需要在beforeEach使用restoreAllMocks方法重置状态

4.3K40
领券