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

如何使用mock-store正确测试调用另一个thunk的thunk

使用mock-store正确测试调用另一个thunk的thunk的过程如下:

  1. 首先,我们需要安装相关的测试库和工具。在Node.js环境中,可以使用npm或者yarn来安装这些依赖。打开终端并执行以下命令:
  2. 首先,我们需要安装相关的测试库和工具。在Node.js环境中,可以使用npm或者yarn来安装这些依赖。打开终端并执行以下命令:
  3. 或者
  4. 或者
  5. 这样就安装了redux-mock-store和redux-thunk两个库。
  6. 在测试文件中,我们需要导入相关的库和模块。假设我们使用的是Jest测试框架,可以在测试文件的顶部添加以下代码:
  7. 在测试文件中,我们需要导入相关的库和模块。假设我们使用的是Jest测试框架,可以在测试文件的顶部添加以下代码:
  8. 这里假设我们要测试的两个thunk分别是yourThunk和anotherThunk,它们都定义在名为yourThunks.js的文件中。
  9. 接下来,我们需要创建一个mock store来模拟Redux的store。在测试文件中添加以下代码:
  10. 接下来,我们需要创建一个mock store来模拟Redux的store。在测试文件中添加以下代码:
  11. 这里我们使用configureMockStore函数创建了一个mock store,并将thunk作为middleware传入。然后我们通过调用mockStore函数来创建一个实际的store对象,初始状态为空对象{}。
  12. 现在我们可以开始测试了。假设我们要测试的是yourThunk中调用了anotherThunk的情况。在测试文件中添加以下代码:
  13. 现在我们可以开始测试了。假设我们要测试的是yourThunk中调用了anotherThunk的情况。在测试文件中添加以下代码:
  14. 这里我们使用Jest的describe和it函数来定义测试用例。在测试用例中,我们首先定义了期望的action数组expectedActions,这个数组包含了我们期望在yourThunk中被调用的action。然后我们通过调用store.dispatch来触发yourThunk,并使用then方法来等待异步操作完成。最后,我们使用store.getActions方法获取实际触发的action数组,并使用expect断言来判断实际的action数组是否与期望的一致。
  15. 最后,我们可以运行测试了。在终端中执行以下命令:
  16. 最后,我们可以运行测试了。在终端中执行以下命令:
  17. 或者
  18. 或者
  19. 这样就会运行测试并输出结果。

总结:使用mock-store正确测试调用另一个thunk的thunk需要安装相关的测试库和工具,创建一个mock store来模拟Redux的store,定义期望的action数组,并使用store.dispatch来触发thunk并等待异步操作完成,最后使用expect断言来判断实际的action数组是否与期望的一致。

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

相关·内容

红队技巧--通过内存中PE执行绕过AV

payload选择metasploitswindows/x64/meterpreter_reverse_https,测试AV为Windows Defender,比如以下面的文件为例进行测试。 ?...然后,这将允许使用分配正确内存量。 PIMAGE_SECTION_HEADER 允许我们访问每个部分地址,大小和数据,以便将其复制到上面分配空间中。...PIMAGE_IMPORT_DESCRIPTOR 这用于访问包含导入地址表(用于查找DLL内存地址查询表,当调用其他库中函数时可以使用信息)信息结构。我们将使用它来获取名称。...将DLL加载到我们自己地址空间后,我们需要遍历并使用它GetProcAddress来获取恶意软件所需功能正确新地址,并在IAT中添加对其引用。...PIMAGE_THUNK_DATA 这将为我们提供被恶意软件调用每个函数名称,一旦有了这些名称,我们就可以使用GetProcAddress它们从它们所在DLL中获取地址,然后将正确新地址添加到

76120

【翻译】Rust中尾递归优化故事

(tail call optimizations)相当整洁,特别是它们解决递归函数如何调用这类基本问题方式。...尾调用优化是如何工作(理论上) 尾递归函数,如果运行在一个不支持TCO(译者注:TCO==Tail Call Optimization, 即尾调用优化)环境中,会出现内存随着函数输入大小而线性增长情况...,不支持正确调用。...LLVM中正确调用实际上可能会由于它们当时实现方式而造成性能损失。 TCO让调试变得更加困难,因为它重写了栈上值。...虽然我很喜欢这个实现中使用trampolining作为一种增量引入TCO方式,@timthelion[12]已经完成性能测试[13]表明,相较于手动把尾递归函数转换成迭代循环,使用tramp.rs会导致一个轻微性能回退

2K20
  • redux-thunk中间件

    就要使用中间件了,而redux-thunk就是这样一个中间件。...// thunk函数 function thunk() { return 1+2 } // 当你call时,才能得到 1+2 thunk() // 3 此函数其实早就有了,之前是用于“传名调用...// 对于函数参数求值,有两种方式: // 1. 传值调用:即在参数传入函数体之前,就进行求值, // 这种方式可能在函数体不需要此参数时,造成浪费 // 2....传名调用:即在函数体内用到时,才进行求值,可以体会一下下面的例子 // 传名调用 function f(x) { return x*2 } f(3+2) // 等同于 // thunk函数 function...另一个就是传入extraCustomArgument参数。这一部分请直接参考redux-thunk官方文档。 可以看出,redux-thunk就是一个扩展功能中间件,它源代码实现非常少!

    54740

    第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

    Redux 官方给出建议是使用中间件来增强 createStore。支持异步数据流 Redux 中间件有很多,其中最适合用来快速上手应该就是 redux-thunk了。...那么中间件又是如何“绕过” dispatch 校验逻辑呢?其实,“绕过”dispatch 只是咱们主观上一个使用感受。...到这里,你已经在使用层面对 Redux 中间件有了足够认知。接下来,我们就要进入源码世界啦。 2. Redux 中间件机制是如何实现?...Redux 中间件是通过调用 applyMiddleware 来引入,因此我们先看看 applyMiddleware 源码(解析在注释里): // applyMiddlerware 会使用“...”...专栏下一讲,我将以 React 另一个“好帮手” React-Router 为切入点,为你讲解前端路由相关知识,不见不散。

    40530

    5. 「snabbdom@3.5.1 源码分析」Thunks 函数

    介绍和使用 thunk 函数传入 一个选择器,一个 key 作为 thunk 身份标识,一个返回 vnode 函数,和一个 state 数组参数。...key 是可选,但是当 selector 在同级 thunks 中不是唯一时候则需要提供,这确保了在 diff 过程中 thunk 始终能正确匹配。...节点来 patch 旧节点,这种操作是不必要,我们可以使用 thunk 函数来避免上述操作。...这里 view 函数仅仅是一个简单示例,在实际使用中,thunks 在渲染一个需要耗费大量计算才能生成复杂视图时才能充分发挥它价值。...下面重点看下init和prepatch做了什么神奇事情 init 当创建DOM元素时走createElm会调用 vnode.data.hook.init 钩子,看到会调用fn(...args)返回真正

    21320

    Generator 函数异步应用

    这是 Generator 函数不同于普通函数另一个地方,即执行它不会返回结果,返回是指针对象。...这意味着,出错代码与处理错误代码,实现了时间和空间上分离,这对于异步编程无疑是很重要。 # 异步任务封装 下面看看如何使用 Generator 函数,执行一个真实异步任务。...凡是用到原参数地方,对Thunk函数求值即可。 这就是 Thunk 函数定义,它是“传名调用一种实现策略,用来替换某个表达式。...# JavaScript 语言 Thunk 函数 JavaScript 语言是传值调用,它 Thunk 函数含义有所不同。...var readFileThunk = Thunk(fs.readFile); readFileThunk(fileA)(callback); 下面是另一个完整例子。

    1.5K20

    Thunk函数使用

    Thunk函数使用 编译器求值策略通常分为传值调用以及传名调用Thunk函数是应用于编译器传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thunk...var x = 1; function s(y){ console.log(y + 1); // 3 } s(x + 1); 在上述例子中,无论是使用传值调用还是使用传名调用,执行结果都是一样...,使用传名调用的话只将表达式传入而并未计算,只要在函数中没有用到x + 2这个表达式就不会计算,使用传值调用的话就会首先将x + 2值计算然后传入,如果没有用到这个值,那么就多了一次没有必要计算。...函数 Js中求值策略是是传值调用,在Js中使用Thunk函数需要手动进行实现且含义有所不同,在Js中,Thunk函数替换不是表达式,而是多参数函数,将其替换成单参数版本,且只接受回调函数作为参数。...或者如果用是yield*,则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。

    1.7K20

    理解 React 中 Redux-Thunk

    Redux Thunk 是一个中间件,它允许 Redux 返回函数而不是 actions。这就允许你在延迟处理 actions 时候结合 promises 使用。...而是,使用 setState 去更新一个对象 state 状态。 Redux 使用 actions 和 reducers 去更新你应用 state。...使用这两个可以让人们轻松了解数据如何流动以及 state 何时发生变化。 Redux 首先复制 state,然后重写你想更改 state 值。...return { ...state, zip: MOR0O0 } 为了让事情简单,Redux-thunk 是一个中间件,使用户能够使用异步函数代替 API 调用。...怎么使用 Redux Thunk: 构建一个购物车 在本教程中,我们将使用 Redux Thunk 开发一个简单购物车功能,更好地明白 Thunk 怎么工作。

    50220

    高级前端react面试题总结

    ,条件或嵌套函数中调用Hook,必须始终在 React函数顶层使用Hook这是因为React需要利用调用顺序来正确更新相应状态,以及调用相应钩子函数。...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作中间件,用于代替 redux-thunk 。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...而replaceState 是完全替换原来状态,相当于赋值,将原来 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了。...它是如何使用状态是 React 组件核心,是数据来源,必须尽可能简单。基本上状态是确定组件呈现和行为对象。与props 不同,它们是可变,并创建动态和交互式组件。

    4.1K40

    你觉得“惰性求值”在 JS 中会怎么实现?

    接上一篇《听君一席话,如听一席话,解释解释“惰性求值”~》,有掘友问:“我懂惰性求值意思了,但是在 JS 中如何实现 thunk 呢?”...赋值时候,我不进行计算,把你包装成一个 暂停等待,等你调用 next() 时候,我再计算; 代码 这不就是最简单版本 JS 惰性求值 Thunk 实现吗?...()) // {value: undefined, done: true} 使用 lazy.js 是类似这样调用: Lazy(stream) .take(5) // 仅仅阅读数据中前五块内容....each(processData); ---- 小结 专栏介绍引用是这句话: 如果要整体了解一个人核心 JavaScript 技能,我最感兴趣是他们会如何使用闭包以及如何充分利用异步。...现在看来,惰性求值似乎能连接“如何使用闭包”和“如何充分利用异步”!!

    1.5K20

    深度剖析github上15.1k Star项目:redux-thunk

    这里我们并不能在action中处理异步逻辑,这也是redux-thunk价值之一,即解决异步调用action。...到这一步我们仍然不能直接进入redux-thunk源码分析,因为我们还是不清楚如何解决上述步骤,因为我们还没有了解redux中间件机制。...redux中间件机制 说到中间件(middleware),使用过nodejs的人可能会很熟悉,比如说知名koa中间件,express中间件等,其实中间件笔者理解是在某个执行流中某个环节做一些额外处理模块...实现中间件机制也很简单, 就是在框架核心执行流中去遍历外部传入中间件,并依次执行即可,我们先来看看redux中如何使用中间件: import { createStore, applyMiddleware...,在第一次调用createThunkMiddleware是在chain阶段,即上面源码分析: 所以这里next也就是第二次调用store.dispatch, 为了实现同一函数内能执行多次dispatch

    75320

    Redux开发实用教程

    具备可预测结果和严格组织结构让代码更容易维护 易测试: 编写可测试代码首要准则是编写可以仅做一件事并且独立小函数(single responsibility principle),Redux代码几乎全部都是这样函数...如果一个 model 变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 变化,依次地,可能会引起另一个 view 变化。...state 方法就是触发 action,action 是一个用于描述已发生事件普通对象; 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers...为了使用异步action我们需要引入redux-thunk库,redux-thunk是为Redux提供异步action支持中间件。...使用redux-thunk npm install --save redux-thunk import thunk from 'redux-thunk' let middlewares = [

    1.4K20

    2021年React学习路线图

    有了 Hooks,开发者可以在函数组件中使用状态。 你应该知道如何使用最常见 Hooks,比如 setState 和 useEffect。...如果你刚开始学习 React,你应该从更简单东西开始。 React Query 是另一个轻量级库,经常被描述成“React 中看不见数据请求库”。...编写测试很重要,根据我经验,通常比编写实际代码更难。 您应该学习最流行测试库,如 Jest 和 Enzyme,以及如何使用库(如 Sinon )模拟 API 调用。...还有其他库,比如 React 测试库。 当应用程序变得复杂时,要对单个组件进行良好单元测试以确保正确性,而不是假设它们按预期方式运行。...您也可以尝试自己搭建 React 应用程序,而不使用 create-react-app 库。查看 Gulp、webpack 或 Babel,看看如何使用这些库来编译 React 代码。

    7.6K21

    Thunk 函数含义和用法

    二、Thunk 函数含义 编译器"传名调用"实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。...凡是用到原参数地方,对 Thunk 函数求值即可。 这就是 Thunk 函数定义,它是"传名调用"一种实现策略,用来替换某个表达式。...三、JavaScript 语言 Thunk 函数 JavaScript 语言是传值调用,它 Thunk 函数含义有所不同。...var readFileThunk = Thunk(fs.readFile); readFileThunk(fileA)(callback); 四、Thunkify 模块 生产环境转换器,建议使用 Thunkify...这种方法就是 Thunk 函数,因为它可以在回调函数里,将执行权交还给 Generator 函数。为了便于理解,我们先看如何手动执行上面这个 Generator 函数。

    1K40

    一天梳理完react面试高频题

    处理异步操作,actionCreator返回值是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 path 属性和当前地址...为应用每一个状态设计简洁视图,当数据改变时 React 能有效地更新并正确地渲染组件。 以声明式编写 UI,可以让代码更加可靠,且方便调试。...React组件具有如下特性∶可组合:简单组件可以组合为复杂组件可重用:每个组件都是独立,可以被多个组件使用可维护:和组件相关逻辑和UI都封装在了组件内部,方便维护可测试:因为组件独立性,测试组件就变得方便很多...此外,由于它本身就是简单函数,所以易于测试。(5)一次学习,随处编写无论现在正在使用什么技术栈,都可以随时引入 React来开发新特性,而不需要重写现有代码。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者

    4.1K20

    redux-thunk引发redux middleware和store enhancer浅析

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求问题,但是为什么要引入redux-thunk来解决异步请求问题...encapsulateFunc({data: '3'}); 对比上面封装函数两种方法我们可以看出: 第一种方法, 每次调用时候都传入dispatch参数,十分冗余 第二种方法,植入store依赖...,方法依赖于store,这使得代码迁移性并不友好 鉴于上述,我们再来看看使用redux-thunk,我们可以如何实现 function encapsulateFunc(data) { return...http://www.ruanyifeng.com/blog/2015/05/thunk.html; 对比上述,使用redux-thunk可以帮助我们代码更优雅,封装设计更合理,当然redux-thunk...是在我们需要时候才引入,如果我们实际项目明明可以简单解决,就不需要引入redux-thunk了。

    1.1K20

    Redux异步解决方案之Redux-Thunk原理及源码解析

    一个单例store也让单元测试很难写。测试action creator时候你很难mock store,因为他引用了一个具体真实store。你甚至不能从外部重置store状态。...我之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,而不是一个纯对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...如果你在thunk action creator中有一个副作用(比如一个API调用),某些情况下,你不想发出这个action该怎么办呢?...最后,不要使用任何库(包括thunk)如果你没有真实需求。...Redux-Thunk最主要作用是帮你给异步action传入dispatch,这样你就不用从调用地方手动传入dispatch,从而实现了调用地方和使用地方解耦。

    3.6K51

    react知识总结_六年级教学工作总结个人

    ---- combineReducers combineReducers 是 redux 提供一个方法,调用这个方法并且传入多个 reducer ,然后对这些 reducer 进行管理: import...action 信息: redux-thunk import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。...redux-promise 让它能够返回一个 使用 promise ,接着我们调用 使用 deleteUserData 函数时就可以执行 then 操作。...总结 以上三个中间件都是对 store 拓展,使用 applyMiddleware 并且分别传入三个 中间件 ,传入时必须要遵循顺序,否则会出问题: applyMiddleware(thunk,

    66120
    领券