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

Redux Saga:在我的saga中使用redux-saga-test-plan和jest测试普通javascript函数

Redux Saga是一个用于管理应用程序副作用(例如异步请求和数据获取)的库。它是基于Generator函数的中间件,可以与Redux一起使用来处理复杂的异步逻辑。

在使用Redux Saga时,可以使用redux-saga-test-plan和jest来测试普通的JavaScript函数。redux-saga-test-plan是一个专门为Redux Saga编写测试的工具,它提供了一组用于测试Saga的API和断言。

下面是一个示例测试Redux Saga中使用redux-saga-test-plan和jest测试普通JavaScript函数的步骤:

  1. 安装依赖:
  2. 安装依赖:
  3. 创建一个测试文件,例如mySaga.test.js
  4. 导入所需的依赖:
  5. 导入所需的依赖:
  6. 编写测试用例:
  7. 编写测试用例:
  8. 在上面的示例中,我们测试了mySaga中调用myFunction函数并分发成功操作的情况。通过使用provide方法,我们模拟了call(myFunction)的返回值,并使用put方法断言是否正确地分发了成功操作。
  9. 运行测试:
  10. 运行测试:

通过上述步骤,我们可以使用redux-saga-test-plan和jest来测试Redux Saga中使用的普通JavaScript函数。这样可以确保Saga在处理副作用时的行为符合预期,并提高代码的可靠性和可维护性。

推荐的腾讯云相关产品:无

参考链接:

  • Redux Saga官方文档:https://redux-saga.js.org/
  • redux-saga-test-plan官方文档:https://redux-saga-test-plan.jeremyfairbank.com/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 单元测试策略及落地

实际项目上副作用还有其他中间层进行处理,比如 redux-thunk、redux-promise 等,本质是一样,只不过 saga 测试性上要好一些。这一层副作用怎么测试呢?...经过仔细总结,认为这一层主要测试内容有五点: 是否使用正确参数(通常是从 action payload 或 redux 来),调用了正确 API 对于 mock API 返回,是否保存了正确数据...读者也可带着这些测试原则去考察一番: https://github.com/jfairbank/redux-saga-test-plan https://github.com/testing-library...路径是错 redux 已经被改过 第一、二种可能,如果是小步前进其实发现起来很快。...如果某段数据获取逻辑多处重复,则可以考虑将该逻辑抽取到 selector 并进行单独测试;第三种可能,确实是问题,但由于所在项目发生频率较低(部分因为上个项目没有类型系统我们不会随意改 redux

1.1K20

每日两题 T35

redux reduxJavaScript 状态容器,提供可预测化状态管理。 应用中所有的 state 都以一个对象树形式储存在一个单一 store 。...你应该把要做修改变成一个普通对象,这个对象被叫做 action,而不是直接修改 state。然后编写专门函数来决定每个 action 如何改变应用 state,这个函数被叫做 reducer。...redux 有且仅有一个 store 一个根级 reduce 函数(reducer)。...redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) library,它目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 使用了 ES6 Generator 功能,让异步流程更易于读取,写入测试

75830

redux-saga_pub culture

通过这个改变,前端应用代码结构更加清晰,业务层可复用部分增加。当然,Saga对自动化测试也支持很好,可以将逻辑单独使用自动化脚本测试,提高项目质量。...TODO, 需要进一步验证) Javascript Generator 使用Saga之前,建议先了解Javascript生成器,因为Saga副作用都是通过生成器来实现。...可以阮一峰ECMAScript 6 入门: Generator 函数语法Generator 函数异步应用章节中了解更多细节。...call方法 call有些类似Javascriptcall函数, 不同是它可以接受一个返回promise函数使用生成器方式来把异步变同步。...put方法 put就是reduxdispatch,用来触发reducer更新store 有什么弊端 目前项目实践遇到一些问题: redux-saga模型理解学习需要投入很多精力 因为需要用

1.4K10

前端react面试题(必备)2

其实 React 本身并不强制使用 JSX。没有 JSX 时候,React 实现一个组件依赖于使用 React.createElement 函数。...总结: JSX 是一个 JavaScript 语法扩展,结构类似 XML。JSX 主要用于声明 React 元素,但 React 并不强制使用 JSX。...action时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量Saga 辅助函数Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外学习成本: redux-saga不仅在使⽤难以理解 generator function,⽽且有数⼗

2.3K20

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

设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...下面来讲下稍微有点复杂地方,sagas 部分。 sagas 这里用了 redux-saga 处理业务流,这里具体也就是异步调用 api 请求数据,处理成功结果错误结果等。...saga 是一种 es6 生成器函数 - Generator ,我们利用他来产生各种声明式 effects ,由 redux-saga 引擎来消化处理,推动业务进行。...这个测试用例步骤就是利用生成器函数一步步产生下一个 effect ,然后断言比较。 从上面的注释 3、4 可以看到, redux-saga 还提供了一些辅助函数来方便处理分支断点。...这也是选择 redux-saga 原因:强大并且利于测试。 api fetch 工具库 接下来就是api 层相关了。

3K30

React saga_react获取子组件ref

是控制执行generator,redux-sagaaction是原始js对象,把所有的异步副作用操作放在了saga函数里面。...调用redux其他中间件一样,如果想使用redux-saga中间件,那么只要在applyMiddleware调用一个createSagaMiddleware实例。...通过使用Effect类函数,可以方便单元测试,我们不需要测试副作用函数返回结果。只需要比较执行Effect方法后返回描述对象,与我们所期望描述对象是否相同即可。...不过这里call方法传入函数fn可以是普通函数,也可以是generator。call方法应用很广泛,redux-saga使用异步请求等常用call方法来实现。...通过转化effects函数,可以方便进行单元测试 完善严谨流程控制,可以较为清晰控制复杂逻辑。

4.5K30

前端实现异步几种方式_redux是什么

大家好,又见面了,是你们朋友全栈君。 1.什么是Saga?...如果有一天跟你说你提交代码有side effect,其实委婉地说,你代码搞出bug来了。。。当然,这跟我们这里讨论side effect不是一回事儿。...redux-saga就是一个帮你管理这堆saga管家,那么它跟其他中间件实现有什么不同呢?它使用了ES6Generator函数语法。...这在redux-saga中被称为worker sagawatcher saga: worker saga:具体业务逻辑实现 watcher saga:接收特定action,然后驱动worker...但是这样的话不好做模拟(mock)测试:我们测试过程,一般不会真的执行异步任务,而是替换成一个假函数。实际上,我们只需要确保yield了一个正确函数,并且函数有着正确参数。

1.7K30

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

(机械也是极限一部分,你不应该在使用工具过程面临太多抉择,而应当专注于将业务翻译成测试)。 为什么谈React全家桶?...本着极限编程原则,我们将测试本身测试环境尽可能简化,以达到加快测试速度,最终反馈到开发速度目的。 我们使用AVA进行测试,它非常简洁,速度非常快,mocha不同,它默认会启动多线程并发测试。...它以Virtual DOM形式封装了恶心浏览器基础设施,让我们以函数和数据结构来描述组件,所以大部分框架不同,我们测试依然可以node上并行运行。...我们用一个叫做Redux-saga库来展现全家桶异步测试怎么写,Redux模仿目标是Elm architecture,但是简化掉了Elm作用模型,只保留了同步模型,Redux-saga其实就是把...Saga是一种worker模式,很早之前Java社区就存在了。Redux-saga抽象出来多种通用作用比如call / takeEvery等等,然后有了这些作用,我们又可以愉快地判等了。

1.1K72

高级前端react面试题总结

,条件或嵌套函数调用Hook,必须始终 React函数顶层使用Hook这是因为React需要利用调用顺序来正确更新相应状态,以及调用相应钩子函数。...action时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量Saga 辅助函数Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...在编译完成之后,JSX 表达式就变成了常规 JavaScript 对象,这意味着你可以 if 语句 for 循环内部使用 JSX,将它赋值给变量,接受它作为参数,并从函数返回它。...(构造函数)调用 super(props) 目的是什么 super() 被调用之前,子类是不能使用 this ES2015 ,子类必须在 constructor 调用 super()

4K40

2018年前端流行哪些技术?

如果不需要支持低版本 IE 的话,我们主要使用 React: React – 编写页面组件 Redux – 数据流状态管理,一般结合 redux-saga 使用 React-router v4 – 前端路由管理...(Note:dva 整合了 redux, redux-router 以及 redux-saga。...熟悉了基本 Redux, Redux-saga, Redux-router 使用之后,可以尝试用 dva 替代) Webpack – 前端构建工具 用到其他类库,技术选择工具 前端开发在用到其他类库...主要是 Node.js 中使用 Axios,替代了 request;浏览器还是使用 Fetch API,还没有浏览器尝试使用 Axios。...Ava, Chai.js, Jest, Enzyme, Headless Chrome – 测试框架,runner,断言库,单元测试,组件测试,端对端测试一些工具。

2.6K10

redux-saga

作为一个Redux中间件,想让Redux应用副作用(即依赖/影响外部环境不纯部分)处理起来更优雅 二.设计理念 Saga像个独立线程一样,专门负责处理副作用,多个Saga可以串行/并行组合起来,...API形式提供,提供各种语义用来生成Effect工具函数,例如把dispatch action包装成put、把方法调用包装成call/apply Effect -> 业务操作 执行时内部进行转换...所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用Promise由redux-saga内部生成 这样做好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...注意,不需要mock异步函数只是简化了单元测试一个环节,即便使用这种对比描述对象方式,仍然需要提供预期数据,例如: // 测试场景直接执行 const iterator = fetchProducts...,这样就把本应该存在于reducer副作用提到了外面,保证了reducer纯度 六.优缺点 优点: 易测试,提供了各种case测试方案,包括mock task,分支覆盖等等 大而全异步控制库,

1.9K41

手写Redux-Saga源码

本文要讲就是Redux-Saga,这个也是实际工作中使用最多Redux异步解决方案。...整个Redux-Saga运行原本Redux并不冲突,Redux甚至都不知道他存在,他们之间耦合很小,只需要时候通过put发出action来进行通讯。...本文全部代码参照官方源码写成,函数名字变量名字尽量保持一致,写到具体方法时候也会贴出对应代码地址,主要代码都在这里:github.com/redux-saga/… 先来看看我们用到了哪些API...这种异步事件处理机制需要一个处理中心来存储事件处理函数,还需要一个方法来触发队列事件执行,再回看前面的使用API,我们发现了两个类似功能API: takeEvery(action, callback...,然后进行处理,这里代码简化了,只支持IO这种effect,官方源码还支持promiseiterator,具体可以看看他源码:github.com/redux-saga/… effectRunner

1.7K30

美团前端react面试题汇总

action时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量Saga 辅助函数Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外学习成本: redux-saga不仅在使⽤难以理解 generator function,⽽且有数⼗...但是已经使用redux来管理存储全局数据基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?...何为 reducer一个 reducer 是一个纯函数,该函数以先前 state 一个 action 作为参数,并返回下一个 state。React遍历方法有哪些?

5.1K30

前端二面高频react面试题集锦_2023-02-23

输出时候,是输出 Web DOM,还是 Android 控件,还是 iOS 控件,就由平台本身决定了。所以,react很方便其他平台集成 React事件普通HTML事件有什么不同?...使用箭头函数(arrow functions)优点是什么 作用域安全:箭头函数之前,每一个新创建函数都有定义自身 this 值(构造函数是新对象;严格模式下,函数调用 this 是未定义...功能强⼤: redux-saga提供了⼤量Saga 辅助函数Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...,形成⼀个⾮常实⽤异步flow 易测试,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等 redux-saga缺陷: 额外学习成本: redux-saga不仅在使⽤难以理解 generator...除了高帧率动画, Vue 其他场景几乎都可以使用防抖节流去提高响应性能。

2.8K20

Redux:从action到saga

前端应用消失部分 一个现代使用redux前端应用架构可以这样描述: 一个存储了应用不可变状态(state)store 状态(state)可以被绘制组件里(html或者其他东西)。...但是当需要处理异步action(函数式编程里称为副作用)时候事情就没有这么简单了。为了解决这个问题,redux建议使用中间件(尤其是thunk)。...使用这个方式会很快导致action生成方法变得复杂并难以测试。这个时候就需要redux-saga了。redux-sagasaga就是一个可声明组织良好副作用实现方式(超时,API调用等等。。)...在上面的例子用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步方法(promise,cps后者其他saga)。...: take effect,它会等待分发redux action时候执行 fork effect, 它会触发另外一个effect,子effect开始之前就会执行 结语 给前端应用添加reduxredux-saga

1.2K00

一天梳理完react面试高频题

React组件具有如下特性∶可组合:简单组件可以组合为复杂组件可重用:每个组件都是独立,可以被多个组件使用可维护:组件相关逻辑UI都封装在了组件内部,方便维护可测试:因为组件独立性,测试组件就变得方便很多...此外,由于它本身就是简单函数,所以易于测试。(5)一次学习,随处编写无论现在正在使用什么技术栈,都可以随时引入 React来开发新特性,而不需要重写现有代码。...action时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量Saga 辅助函数Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外学习成本: redux-saga不仅在使⽤难以理解 generator function,⽽且有数⼗

4.1K20

简析redux技术栈(二):认识sagabufferchanel

例如下面使用redux-sagareact项目需要以下这样 初始化 function configureStore(initialState) { // 运行返回一个redux middleware...我们平时写代码 react saga 进行交互,都是dispatch一个action到与我们 saga 逻辑进行交互。...翻看createSagaMiddleware源码,可以很清晰看到,这就是使用了中间件后,我们每次dispatch一个 action 后, saga 中间件内会往channel内put这个action...return sagaMiddleware; } 了解 saga 运行机制之前,先学习 redux-saga 源码内部两个比较常用数据结构bufferchanel。...只是对于非 saga 内置action使用asap(() => { put(input); });进行调用,这个asap方法其实是 saga 内部调度系统一个执行函数,它作用是如果当前 saga 是空闲状态

1.1K10
领券