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

如何在redux-saga的jest测试中产生多个值?

在redux-saga的jest测试中产生多个值,可以使用redux-saga-test-plan库来模拟生成多个值。下面是一个完整的示例:

首先,安装redux-saga-test-plan库:

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

然后,假设我们有一个saga函数,它从API中获取数据并将其存储到Redux store中:

代码语言:txt
复制
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';
import { fetchApiData } from './api';

export function* fetchDataSaga() {
  try {
    const data = yield call(fetchApiData);
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

export function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchDataSaga);
}

接下来,我们可以使用redux-saga-test-plan来测试这个saga函数。我们可以使用expectSaga函数来创建一个测试计划,并使用provide函数来模拟API调用返回的数据:

代码语言:txt
复制
import { expectSaga } from 'redux-saga-test-plan';
import { fetchDataSaga } from './sagas';
import { fetchDataSuccess, fetchDataFailure } from './actions';
import { fetchApiData } from './api';

it('should handle successful data fetching', () => {
  const testData = { id: 1, name: 'Test Data' };

  return expectSaga(fetchDataSaga)
    .provide([[call(fetchApiData), testData]])
    .put(fetchDataSuccess(testData))
    .run();
});

it('should handle data fetching failure', () => {
  const error = new Error('API Error');

  return expectSaga(fetchDataSaga)
    .provide([[call(fetchApiData), Promise.reject(error)]])
    .put(fetchDataFailure(error))
    .run();
});

在上面的示例中,我们使用provide函数来模拟call(fetchApiData)调用返回的数据。在第一个测试中,我们提供了一个成功的返回值testData,并期望saga函数会调用put(fetchDataSuccess(testData))来将数据存储到Redux store中。在第二个测试中,我们提供了一个失败的返回值Promise.reject(error),并期望saga函数会调用put(fetchDataFailure(error))来处理错误。

这样,我们就可以在redux-saga的jest测试中产生多个值了。请注意,以上示例中的fetchApiDatafetchDataSuccessfetchDataFailure是示意性的函数和动作,你需要根据实际情况进行替换。

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

相关·内容

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

设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...这就是写测试用例基本套路。 我们在写测试用例时尽量保持用例单一职责,不要覆盖太多不同业务范围。测试用例数量可以有很多个,但每个都不应该很复杂。...saga 是一种 es6 生成器函数 - Generator ,我们利用他来产生各种声明式 effects ,由 redux-saga 引擎来消化处理,推动业务进行。...这个测试用例步骤就是利用生成器函数一步步产生下一个 effect ,然后断言比较。 从上面的注释 3、4 可以看到, redux-saga 还提供了一些辅助函数来方便处理分支断点。...主要注意 fetch 是 promise 返回, jest 各种异步测试方案都能很好满足。

3K30
  • 每日两题 T35

    随着应用不断变大,你应该把根级 reducer 拆成多个 reducers,分别独立地操作 state 树不同部分,而不是添加新 stores。...redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) library,它目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 使用了 ES6 Generator 功能,让异步流程更易于读取,写入和测试。...redux-saga与其他redux中间件比较 •redux-thunk 缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态,比较灵活,易于控制 •redux-promise优点是...api层与store解耦,缺点是对请求失败,请求情形没有很好处理 •redux-saga 优点是api层与store解耦,对请求,请求失败都有完善处理,缺点是代码量较大 References

    77030

    前端react面试题(必备)2

    props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用为什么使用jsx组件没有看到使用react却需要引入react?...和useCallback出现就是为了减少这种浪费,提高组件性能,不同点是:useMemo返回是一个缓存,即memoized ,而useCallback返回是一个memoized 回调函数。...,array改变时才会 重新执行useMemo不传数组,每次更新都会重新计算空数组,只会计算一次依赖对应,当对应发生变化时,才会重新计算(可以依赖另外一个 useMemo 返回)不能在useMemo...提供了⼤量Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外学习成本: redux-saga不仅在使⽤难以理解 generator function,⽽且有数⼗

    2.3K20

    JavaScript 测试教程 part 1:用 Jest 进行单元测试

    本文是 JavaScript 测试教程 系列第1部分 1. JavaScript测试教程-part 1:用 Jest 进行单元测试 2....你可以测试程序方方面面,从单个函数及其返回到在浏览器运行复杂程序。由于这是本课程第一篇文章,因此我会简要对比一些流行测试类型。 单元测试 单元测试覆盖了代码块,确保它们在运行时没有问题。...稍后我们将学习如何在 React 中使用 Jest 首先,让我们创建一些可以测试简单函数。...超时默认为 5 秒,并指定如果测试花费时间太长,则中止测试之前要等待多长时间。 expect 函数用于测试。作为参数,它接受你要测试:在我们例子,它是 divide 函数返回。...使用 Jest,你可以使用 describe 函数对它们进行分组。它创建了一个可以合并多个测试块。

    2.8K20

    2024 年必会 10 个 Node.js 新特性,你还不知道就太落伍了!

    尽管 Jest 在 Node.js 社区很受欢迎,但它某些缺点使得原生 Node.js 测试运行器更具吸引力。...你可能使用过其他测试框架 Mock 功能, Jest jest.spyOn 或 mockResolvedValueOnce。...JavaScript 开发多个项目常有不同包管理器偏好, pnpm 和 yarn,这会导致冲突和不一致。Corepack 解决了这个问题,使每个项目无缝使用其首选包管理器。...加载多个 .env 文件 Node.js .env 加载器还支持加载多个 .env 文件。当您有不同环境(开发、测试、生产)环境变量时,这非常有用。..../.env.development 变量若也存在于 ./.env.default ,将覆盖 ./.env.default

    29910

    一天梳理完react面试高频题

    React-Router如何获取URL参数和历史对象?(1)获取URL参数get传路由配置还是普通配置,:'admin',传参方式:'admin?id='1111''。...动态路由传路由需要配置成动态路由:path='/admin/:id',传参方式,'admin/111'。...通过this.props.match.params.id 取得url动态路由id部分,除此之外还可以通过useParams(Hooks)来获取通过query或state传传参方式:在Link...React组件具有如下特性∶可组合:简单组件可以组合为复杂组件可重用:每个组件都是独立,可以被多个组件使用可维护:和组件相关逻辑和UI都封装在了组件内部,方便维护可测试:因为组件独立性,测试组件就变得方便很多...提供了⼤量Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试

    4.1K20

    redux-saga入门

    action,其作用是产生一个dispatch行为Effect,其action就是put参数action。...一个task就想一个在后台运行进程,在redux-saga应用程序,可以运行多个task,task可通过fork函数创建。...Promise.race,即race参数多个任务竞赛,谁先完成,race就结束,这里也分两种情况: 如果率先完成者正常完成,则取消其他未完成任务,且完成任务结果时该任务return,其他取消任务结果均为...非阻塞调用意思是,saga会在yield Effect之后立即恢复执行。下面是一个阻塞调用与非阻塞调用例子。 阻塞调用:下面代码call是个会产生阻塞调用方法。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.3K20

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

    前端自动化测试产生背景 在开始介绍jest之前,我想有必要简单阐述一下关于前端单元测试一些基础信息。 为什么要进行测试?...但是快速迭代过程产生了大量问题:代码质量(可读性差、可维护性低、可扩展性低)低,频繁产品需求变动(代码变动影响范围不可控)等。...但这里我们思考一种场景:如果使用done来测试回调函数(包含定时器场景,setTimeout),由于定时器我们设置了 一定延时( 3s)后执行,等待 3s 后会发现测试通过了。...在单元测试,我们可能并不需要关心内部调用方法执行过程和结果,只想知道它是否被正确调用即可,甚至会指定该函数返回。这个时候,mock意义就很大了。...我们在测试也主要是用到了mock函数提供以下三种特性: 捕获函数调用情况 设置函数返回 改变函数内部实现 下面,我将分别介绍这三种方法以及他们在实际测试应用。

    5K20

    深入理解 redux 数据流和异步过程管理

    组件从 store 取数据,当交互时候去通知 store 改变对应数据。...redux saga 设计成 generator 形式是一种学习成本和可测试权衡。 还记得 redux-thunk 有啥问题么?多个异步过程之间并行、串行复杂关系没法处理。...所以 redux-saga 可以做复杂异步过程管理,而且具有很好测试性。...但是 redux-saga 优点还有基于 generator 良好测试性,而且大多数场景下,redux-saga 提供异步过程处理能力就足够了,所以相对来说,redux-saga更多一些...redux-saga 透传了 action 到 store,并且监听 action 执行相应异步过程。异步过程描述使用 generator 形式,好处是可测试性。

    2.5K10

    React saga_react获取子组件ref

    ', fetchData) } takeLatest 对于触发多个action时候,只执行最后一个,其他会自动取消。...(1)声明式Effect redux-saga中最大特点就是提供了声明式Effect,声明式Effect使得redux-saga监听原始js对象形式action,并且可以方便单元测试,我们一一来看...通过使用Effect类函数,可以方便单元测试,我们不需要测试副作用函数返回结果。只需要比较执行Effect方法后返回描述对象,与我们所期望描述对象是否相同即可。...products = yield call(Api.fetch, '/products') // ... } 上述代码,比如我们需要测试Api.fetch返回结果是否符合预期,通过调用call...,首先监听原始动作提取出传递来用户名和密码,然后请求是否登陆成功,如果登陆成功有返回,则执行putaction:to_login_in. (2) LoginSuccess(登陆成功列表展示页) 登陆成功后页面功能包括

    4.5K30

    React之redux学习日志(reduxreact-reduxredux-saga)

    TestRedux 组件props // mapStateToProps 会接受到 state 仓库中所有的 // mapDispatchToProps: 会接受到 dispatch 方法 export...default connect(mapStateToProps, mapDispatchToProps)(TestRedux ) 备注:为了确保reduxstate不能够直接修改其中和统一数据格式...const mapStateToProps = state => ({ // userInfo: state.userInfo 会抛出异常 // 使用get或者getIn获取state...当我们需要执行一些异步操作时,由于action只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见两种中间件。   ...store/sagas' import backstageArticleManage from '@/views/backstage/ArticleManage/store/sagas' // 整合多个模块

    54830

    Jest + React Testing Library 单测总结

    如果想要看如何安装 Jest,可以参考:Jest 上手。 Jest 常用配置项在根目录 jest.config.js ,常用配置可以参考:Jest 配置文件。...运行指定文件测试用例),就可以得到测试结果,: 当然,如果想要看到覆盖率报告,可以使用 jest --coverage,或者 jest-report。...在 VS Code ,我们也可以安装插件:Jest Runner。 在代码,就可以快速跑测试用例,可以说非常方便了。...2.2 Jest 匹配器 Jest 匹配器是在 expect 断言时,用来检查是否满足一定条件。...在组件单测,有的时候我们可能只关注一个函数是否被正确地调用了,或者只想要某个函数返回来支持该组件渲染逻辑是否正确,而并不关心这个函数本身逻辑。

    4.6K20

    Vue Test Utils处理异步行为

    Vue 是被动更新:当你更改一个时,DOM 会自动更新以反映最新。Vue 以异步方式执行这些更新。相比之下,像 Jest 这样测试运行程序则是同步执行代码。...这种异步和同步差异可能会在测试产生一些意外结果。一个简单例子:使用trigger进行更新让我们通过一个简单例子来说明这一点。...测试异步 setup如果你组件使用异步 setup,则必须将该组件装载到 Suspense 组件。...使用 Vue Test Utils flushPromises 来解决非 Vue 依赖项未解析 Promise( API 请求)。...使用 Suspense 在异步测试函数测试异步 setup 组件。通过这些策略,你可以确保 Vue 组件在测试时按预期更新和运行,从而获得可靠测试结果。

    6800

    2022社招react面试题 附答案

    :config 所有jsx属性都在config以对象属性和形式存储 参数三:children 存放在标签内容,以children数组方式进行存储; 当然,如果是多个元素呢?...批量更新策略会对其进⾏覆盖,取最后⼀次执⾏,如果是同时setState多个不同,在更新时会对其进⾏合并批量更新。...虽然这两种工具都非常有用,但是浅比较会带来额外性能损失,因此如果使用不当,这两种方法都会对性能产生负面影响。...try/catch语法直接捕获处理; 功能强⼤:redux-saga提供了⼤量Saga辅助函数和Effect创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤; 灵活:redux-saga可以将多个...Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow; 易测试,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等。

    2.1K10

    学习笔记——在vue如何配置Jest(一)

    最近在搞Jest单元测试,如何在vue安装和使用jest我就不说了,前一篇文章简单说了一下在使用jest时遇到一些问题,但是我觉得并没有真正解决很好。...采用方式就是新建一个空vue-cli生成jest来做单元测试项目,这就导致了测试环境配置是极为脆弱。而且还有十分大隐患。但是又没办法一下子解决。...所以,我想在这篇文章,整理记录一下jest配置参数用法等。   jest配置文件是单独生成在unit文件夹下一个独立文件,并没有和vue-cli生成webpack构建环境相关联。...snapshotSerializers:快照测试插件,会生成测试文件一个快照版本,可以再package.json查看安装快照插件。...这样我们就解释完了基础配置参数,学习过后,我们对jest配置有了一个基本了解。但是要想写单元测试文件,还是远远不够。下一篇文章,我会介绍如何在为vue单文件组件写测试用例。

    1.8K10
    领券