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

在redux saga中单元测试多个顺序的“put”调用

在redux saga中,"put"是一个用于触发action的effect。它用于向redux store分发一个action,以便被reducer处理。当我们在saga中使用"put"时,我们可以测试多个顺序的"put"调用的单元测试。

在进行单元测试之前,我们需要安装一些必要的依赖项。首先,我们需要安装redux-saga-test-plan,它是一个用于测试redux-saga的工具。可以使用以下命令进行安装:

代码语言:txt
复制
npm install redux-saga-test-plan --save-dev

接下来,我们可以编写一个单元测试来测试多个顺序的"put"调用。下面是一个示例:

代码语言:txt
复制
import { put, call } from 'redux-saga/effects';
import { expectSaga } from 'redux-saga-test-plan';
import { fetchData, fetchSuccess, fetchError } from './actions';
import { mySaga } from './sagas';

describe('mySaga', () => {
  it('should handle multiple put calls in order', () => {
    const data = { id: 1, name: 'John Doe' };

    return expectSaga(mySaga)
      .provide([
        [call(fetchData), data],
      ])
      .put(fetchSuccess(data))
      .put(fetchError('Something went wrong'))
      .run();
  });
});

在上面的示例中,我们首先定义了一个名为data的模拟数据。然后,我们使用expectSaga函数来测试mySaga。我们使用provide方法来模拟调用fetchData,并返回data。接下来,我们使用put方法来定义我们期望的"put"调用顺序。在这个例子中,我们期望首先调用fetchSuccess,然后调用fetchError。

最后,我们使用run方法来运行测试。如果所有的"put"调用按照我们定义的顺序执行,测试将通过。否则,测试将失败并显示相应的错误信息。

这是一个基本的单元测试示例,用于测试redux saga中多个顺序的"put"调用。根据具体的业务逻辑和需求,你可以根据需要进行更复杂的测试。

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

相关·内容

redux-saga

作为一个Redux中间件,想让Redux应用副作用(即依赖/影响外部环境不纯部分)处理起来更优雅 二.设计理念 Saga像个独立线程一样,专门负责处理副作用,多个Saga可以串行/并行组合起来,...API形式提供,提供各种语义用来生成Effect工具函数,例如把dispatch action包装成put、把方法调用包装成call/apply Effect -> 业务操作 执行时内部进行转换...接入到Redux 提供读/写Redux state接口(select/put) 提供监听action接口(take/takeEvery/takeLatest) Sagas组合、通信 task顺序控制...所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用Promise由redux-saga内部生成 这样做好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...简单理解的话:redux-saga里,Saga就是generator,Sagas就是多个generator Sagas有2种顺序组合方式: yield* saga() call(saga) 同样,直接

1.9K41

React saga_react获取子组件ref

是控制执行generator,redux-sagaaction是原始js对象,把所有的异步副作用操作放在了saga函数里面。...和调用redux其他中间件一样,如果想使用redux-saga中间件,那么只要在applyMiddleware调用一个createSagaMiddleware实例。...首先,redux-saga中提供了一系列api,比如take、put、all、select等API ,redux-saga中将这一系列api都定义为Effect。...saga.js文件监听这两个方法并执行副作用函数,最后put发出转化后action,给reducer函数调用: function * watchUsername(){ while(true){...5.总结 通过上述章节,我们可以概括出redux-saga做为redux中间件全部优点: 统一action形式,redux-saga,从UIdispatchaction为原始对象 集中处理异步等存在副作用逻辑

4.5K30

手写Redux-Saga源码

本文要讲就是Redux-Saga,这个也是我实际工作中使用最多Redux异步解决方案。...整个Redux-Saga运行和原本Redux并不冲突,Redux甚至都不知道他存在,他们之间耦合很小,只需要时候通过put发出action来进行通讯。...saga入口 takeEvery:这个方法是用来控制并发流程 call:用来调用其他方法 put:发出action,用来和Redux通讯 从中间件入手 之前我们讲Redux源码时候详细分析了Redux...因为我们代码不同环境下运行可能会产生不同结果,特别是这些异步请求,我们写单元测试时来造这些数据也会很麻烦。...Redux-Saga增强了Reduxdispatch函数,dispatch同时会触发channel.put,也就是让Redux-Saga也响应回调。

1.7K30

【Web技术】639- Web前端单元测试到底要怎么写?

设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...中间 store 内容都是 redux 相关,看名称应该都能知道意思了。 具体代码请看这里:https://github.com/deepfunc/react-test-demo。...这就是写测试用例基本套路。 我们写测试用例时尽量保持用例单一职责,不要覆盖太多不同业务范围。测试用例数量可以有很多个,但每个都不应该很复杂。...这里我们来看看获取表格数据业务代码: import { all, takeLatest, put, select, call } from 'redux-saga/effects'; import *...我们都知道这种业务代码涉及到了 api 或其他层调用,如果要写单元测试必须做一些 mock 之类来防止真正调用 api 层,下面我们来看一下 怎么针对这个 saga 来写测试用例: import {

3K30

React 单元测试策略及落地

,加之一般 reducer 做重逻辑处理,此处做单元测试保护价值很大。...实际项目上副作用还有其他中间层进行处理,比如 redux-thunk、redux-promise 等,本质是一样,只不过 saga 测试性上要好一些。这一层副作用怎么测试呢?...经过仔细总结,我认为这一层主要测试内容有五点: 是否使用正确参数(通常是从 action payload 或 redux 来),调用了正确 API 对于 mock API 返回,是否保存了正确数据...这违反上述所说“不关注内部实现”原则:action分发顺序也是一种内部实现,改变实现次序也将使测试挂掉 当在实现某个部分加入新语句时,该语句后续所有的测试都会挂掉,并且出错信息非常难以描述原因,...路径是错 redux 已经被改过 第一、二种可能,如果是小步前进其实发现起来很快。

1.1K20

redux-saga学习

sagas监听发起action,然后决定基于这个action来做什么 (比如:是发起一个异步请求,还是发起其他action到store,还是调用其他sagas 等 ) redux-saga世界里...发起异步调用(副作用) 为了模拟现实计算,添加另外一个按钮,用于点击 1 秒后增加计数 1. UI 组件上 Counter.js 添加一个额外按钮和一个回调 onIncrementAsync...反向控制 takeEvery 情况,被调用任务无法控制何时被调用, 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。...Task 一个 task 就像是一个在后台运行进程。基于 redux-saga 应用程序,可以同时运行多个 task。...阻塞调用/非阻塞调用 阻塞调用意思是,Saga yield Effect 之后会等待其执行结果返回,结果返回后才会恢复执行 Generator 下一个指令。

2.7K10

React全家桶与前端单元测试艺术|洞见

有点像Event Sourcing,以消息而非调用来处理逻辑,更新和订阅逻辑不在一起(事件是写模型,各种view就是多个读模型)。 reducer几乎包括了我们所有前端业务核心,测好它就测了大半。...我们用一个叫做Redux-saga库来展现全家桶异步测试怎么写,Redux模仿目标是Elm architecture,但是简化掉了Elm作用模型,只保留了同步模型,Redux-saga其实就是把...Saga是一种worker模式,很早之前Java社区就存在了。Redux-saga抽象出来多种通用作用比如call / takeEvery等等,然后有了这些作用,我们又可以愉快地判等了。...比如: import { takeEvery, put, call, fork, cancel } from 'redux-saga/effects' function *account() {...}) 你看我们测试连异步操作都还可以无耻地判等。call就是以某些参数调用某个函数,put就是发事件。

1.1K72

react项目架构之路初探

github地址:https://github.com/majunchang/reactarch-explore 项目的引入背景 最近项目中,遇到了一个项目,多个页面存在多个表格,每一个表格都有相似的分页逻辑和不同查询参数...redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集一个地方集中处理,可以用来代替 redux-thunk 中间件。...,thunks 是action被创建时调用,而 Sagas只会在应用启动时调用 redux-thunk中间件可以让action创建函数先不返回一个action对象,而是返回一个函数,函数传递两个参数...(dispatch,getState),函数体内进行业务逻辑封装 redux-thunk缺点: action形式不统一 ,异步操作太分散,分散了各个action redux-saga本质是一个可以自执行...写法 // 引入 redux-saga 引入effect import {call, put, take, fork, takeEvery, select} from 'redux-saga/effects

2.4K10

redux-saga入门

sagayield 后面的内容我们称呼它为Effect(redux-saga任务单元),Effects我们可以进行启动其它saga,也可以处理一些副作用操作。...如果直接打印Effect: console.log(put({ type: 'increment' })); redux-saga 世界里,Saga 都用 Generator 函数实现...一个task就想一个在后台运行进程,redux-saga应用程序,可以运行多个task,task可通过fork函数创建。...阻塞调用意思是sagayield Effect之后会等待其结果返回,结果返回后才会继续执行saga中下一个指令。...非阻塞调用意思是,saga会在yield Effect之后立即恢复执行。下面是一个阻塞调用与非阻塞调用例子。 阻塞调用:下面代码call是个会产生阻塞调用方法。

1.3K20

React-Redux-Saga

Redux-saga 简介redux-sagaredux-thunk 一样, 是一个 Redux 获取存储异步数据中间件redux-saga 可以直接拦截 dispatch 派发 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga创建 store 时应用 redux-saga...如果是redux-saga, 那么除了需要在创建store时候指定中间件以外, 还需要手动调用中间件run方法才行* */sagaMiddleware.run(undefined,...default mySaga;如上自定义函数已经获取到了网络数据,添加到 Redux 中保存是通过 Saga 提供 put 方法进行添加即可,更改 store.js 告诉 saga 中间件生成器哪些通过...即可,但是如果我们想同时保存多个数据 , 那么我们就必须借助另外一个函数, all():saga.js:import {takeLatest, put, all} from 'redux-saga/effects'import

18030

一文梭穿Vuex、Flux、ReduxRedux-saga、Dva、MobX

中间件 刚才说到都是比较理想同步状态。实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类思想,最终都要落地到同步异步处理来。...mutation 是必须同步,这个很好理解,和之前 reducer 类似,不同步修改的话,会很难调试,不知道改变什么时候发生,也很难确定先后顺序,A、B两个 mutation,调用顺序可能是 A -...redux-saga 之前,需要熟悉一些预备知识,那就是 ES6 Generator。...也就是相当于take、put、call、put 这几个方法调用变成了同步,上面的全部完成返回了,才会执行下面的,类似于 await。...异步数据获取相关业务逻辑放在了单独 saga.js ,不再是掺杂 action.js 或 component.js

5.4K10

简析redux技术栈(二):认识sagabuffer和chanel

本文地址 我们知道redux-saga 也是通过中间件形式与 redux 本身连接起来。...我们平时写代码 react saga 进行交互,都是dispatch一个action到与我们 saga 逻辑进行交互。...翻看createSagaMiddleware源码,可以很清晰看到,这就是使用了中间件后,我们每次dispatch一个 action 后, saga 中间件内会往channel内put这个action...return sagaMiddleware; } 了解 saga 运行机制之前,先学习 redux-saga 源码内部两个比较常用数据结构buffer和chanel。...只是对于非 saga 内置action使用asap(() => { put(input); });进行调用,这个asap方法其实是 saga 内部调度系统一个执行函数,它作用是如果当前 saga 是空闲状态

1.1K10

Redux:从action到saga

这个时候就需要redux-saga了。redux-sagasaga就是一个可声明组织良好副作用实现方式(超时,API调用等等。。)...我们来看看用saga代替action creator获取todo数据方法:import { call, put } from 'redux-saga'; function* loadTodos()...在上面的例子我用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步方法(promise,cps后者其他saga)。...之前例子里,loadTodos saga一开始就会触发。但是,如果我们想要每次一个action分发到store时候触发saga要怎么做呢?...: take effect,它会等待分发redux action时候执行 fork effect, 它会触发另外一个effect,子effect开始之前就会执行 结语 给前端应用添加reduxredux-saga

1.2K00

状态管理概念,都是纸老虎

实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类思想,最终都要落地到同步异步处理来。...mutation 是必须同步,这个很好理解,和之前 reducer 类似,不同步修改的话,会很难调试,不知道改变什么时候发生,也很难确定先后顺序,A、B两个 mutation,调用顺序可能是 A -...redux-saga 之前,需要熟悉一些预备知识,那就是 ES6 Generator。...也就是相当于take、put、call、put 这几个方法调用变成了同步,上面的全部完成返回了,才会执行下面的,类似于 await。...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取相关业务逻辑放在了单独 saga.js ,不再是掺杂 action.js 或 component.js

5.2K20

高级前端react面试题总结

,条件或嵌套函数调用Hook,必须始终 React函数顶层使用Hook这是因为React需要利用调用顺序来正确更新相应状态,以及调用相应钩子函数。...一旦循环或条件分支语句中调用Hook,就容易导致调用顺序不一致性,从而产生难以预料到后果。...redux-saga如何处理并发:takeEvery可以让多个 saga 任务并行被 fork 执行。...提供了⼤量Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...(构造函数)调用 super(props) 目的是什么 super() 被调用之前,子类是不能使用 this ES2015 ,子类必须在 constructor 调用 super()

4.1K40

Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

我们应用可能涉及到多个异步请求,所以 redux-saga 推荐最佳实践是单独创建一个 sagas 文件夹,来存放所有处理异步请求 sagas 文件,以及可能用到辅助文件。...接着,我们使用 redux-saga 提供 effects helpers 函数:putput 类似之前 view dispatch 操作,,来 dispatch 了三个 action:LOGIN_SUCCESS...SET_IS_OPENED:设置登录框开启/关闭信息 我们还从 redux-saga/effects 包中导入了必要函数: call: saga 函数调用其他异步/同步函数,获取结果 put:...类似 dispatch,用于 saga 函数中发起 action take: saga 函数监听 action,并获取对应 action 所携带数据 fork: saga 函数无阻塞调用...适配异步 action reducer 我们在前面处理登录时,组件内部 dispatch 了 LOGIN action,处理异步 action saga 函数,使用 put 发起了一系列更新

2.2K20
领券