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

如何在redux中对异步调用进行单元测试/存根

在Redux中对异步调用进行单元测试/存根的方法有多种。下面是一种常见的方法:

  1. 使用redux-mock-store库:redux-mock-store是一个用于创建模拟Redux store的库,它可以帮助我们在测试中模拟Redux store的行为。首先,安装redux-mock-store库:
代码语言:txt
复制
npm install --save-dev redux-mock-store
  1. 创建模拟store:在测试文件中,首先导入redux-mock-store和要测试的异步action创建函数。然后,使用redux-mock-store创建一个模拟store,并将其传递给异步action创建函数。
代码语言:txt
复制
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchUser } from './actions';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('Async actions', () => {
  it('should dispatch the correct actions on successful API call', () => {
    const store = mockStore({}); // 创建一个模拟store

    return store.dispatch(fetchUser()).then(() => {
      const actions = store.getActions();
      expect(actions[0]).toEqual({ type: 'FETCH_USER_REQUEST' });
      expect(actions[1]).toEqual({ type: 'FETCH_USER_SUCCESS', payload: { /* 用户数据 */ } });
    });
  });
});

在上面的示例中,我们创建了一个模拟store,并使用store.dispatch调用了fetchUser异步action创建函数。然后,我们使用store.getActions()获取store中的所有action,并对其进行断言。

需要注意的是,上述示例中的fetchUser异步action创建函数应该返回一个Promise,以便在测试中使用.then()进行链式调用。

这种方法可以帮助我们对Redux中的异步调用进行单元测试,并验证在不同情况下是否正确地触发了相应的action。

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

相关·内容

何在单元测试写数据库进行测试?

首先问一个问题,在接口测试,验证被测接口的返回值是否符合预期是不是就够了呢? 场景 转账是银行等金融系统中常见的一个场景。在在最近的一个针对转账服务的单元测试,笔者就遇到了上述问题。...从上述介绍,我们得以了解到,这里的转账服务接口只是完成了申请的接收工作。转账申请需要后续被人工审核后才能完成实际的转账。...我们再添加第二个单元测试用例,来验证数据库写库的数据是否符合预期结果。...如何两笔申请进行单元测试,Mock又如何写?这个就留给读者自行练习了。 如果不是写库,而是通过MQ对外发布?又如何进行测试呢?...小结 本案例演示了如何使用Mockito提供的Capture特性来验证方法的传参,同时也展示了如何使用AssertJ进行对象的多个属性的断言。

3.6K10

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

* toBeCalledWith:函数是否以某些参数为入参被调用 * assertions:检测用例中有多少个断言被调用,一般用于异步测试 四、Jest 周期函数 在写测试用例之前,可以用四个周期函数进行一些处理...七、Jest 异步测试 Jest单元测试是同步的,因此面对异步操作fetch获取数据,需要进行异步的模拟测试。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态的管理,需要mock store.../pages/List/action'; const middlewares = [thunk]; //引入redux-mock-store store进行mock const mockStore...,在携程的持续集成流程再接入sonar, 可以查看完整的单元测试报告。

6K30

VisualStudio单元测试

这篇文章实践使用VisualStudio 2019进行单元测试。 在VisualStudio通常都会使用“测试资源管理器”进行单元测试。 ?...Live Unit Testing 是 Visual Studio 2017 引入的一种技术。 进行代码更改时,它会自动执行单元测试。 实时单元测试: 让你更有信心地代码进行重构和更改。...填充码可用于替换对无法修改的程序集( .NET 程序集)的调用。 一般原则是,为在 Visual Studio 解决方案中进行调用使用存根,并为其他引用的程序集的调用使用填充码。...这是因为在你自己的解决方案,通过按照存根要求的方式定义接口来分离组件是一个很好的做法。 但是,外部程序集( System.dll)通常没有单独的接口定义,因此必须改用填充码。...; } } 由于它依赖于DateTime.Now,而假设我们没办法更改这段代码,为了进行单元测试我们必须使用Shim破除DateTime.Now的依赖。

3.7K50

单元测试】--工具与环境

无论是在教育、开发或者企业应用,JUnit 都是一个不可或缺的工具,用于进行单元测试和验证 Java 应用程序的正确性。...这些步骤应该让你能够安装、配置和运行 NUnit 框架,以进行单元测试。确保参考 NUnit 官方文档以获取更详细的信息和建议。...2.2 模拟和存根 在 NUnit ,你可以使用模拟(Mocks)和存根(Stubs)来模拟外部依赖或虚拟对象的行为,以便在单元测试中隔离被测代码并确保其正常运行。...在命令行,可以运行以下命令: nuget install Moq 2. 创建存根对象: 在单元测试,首先创建一个存根对象,它将代替真实的外部依赖。...配置存根对象的行为: 使用 Setup 方法来配置存根对象的行为。你可以指定当调用存根对象的某个方法时应返回什么值。 5.

32550

React + Redux Testing Library 单元测试

如果这个模块有多种表现形态,那就把它分成测试单元进行多次 Mock,每个 it() 单元测试一定是针对于单个功能点进行测试的。 如何测试异步代码?...唯一需要注意的是, 额外的expect.assertions(number) 其实是验证在测试期间所调用的断言数量,这在测试多层异步代码时很有用,以确保实际调用回调的断言次数。...其实组件化并不全是为了复用,很多情况下也恰恰是为了分治,从而我们可以分组件 UI 页面进行开发,然后分别对其进行单元测试。...如何 Redux 进行单元测试 得益于 Redux 能够将 React 应用的共享状态进行隔离,我们的代码也因此变得更加结构化且易于维护,Redux 的 reducer、action 和 selector...都被放在了合理的位置,承担不同的职责 ,这也使得它们进行单元测试变得容易很多。

2.3K10

如何自动化测试 React Native 项目 (下篇) - 单元测试

在最近的 enzyme 版本更新后, shallowWrapper 的 component lifecycle 函数也会被正确的调用。因此组件状态的测试是比较容易的。...来执行异步的 action(用了redux-thunk, 最终会dispatch纯Object的action)或者纯Object 的 action。...Async action的测试有两种不错的方案: 借助第三方库configureMockStore,将 redux-thunk 这种异步中间件传入进去处理,获得封装后的 store.dispatch 来派发...WWW API测试 WWW API测试是指server接口的测试, 只要在测试代码调用 React Native 的API模块的方法并且验证返回结果的正确性即可(可能需要 mock 一些 token...可以在 package.json 里面用不同的 yarn script, yarn test-ut, yarn test-wwwapi 来分别执行单元测试和WWW API测试。

3.2K21

React saga_react获取子组件ref

redux-saga简介 Redux-saga是Redux的一个中间件,主要集中处理react架构异步处理工作,被定义为generator(ES6)的形式,采用监听的形式进行工作。...是控制执行的generator,在redux-sagaaction是原始的js对象,把所有的异步副作用操作放在了saga函数里面。...和调用redux的其他中间件一样,如果想使用redux-saga中间件,那么只要在applyMiddleware调用一个createSagaMiddleware的实例。...这个描述对象包含了所需要调用的方法和执行方法时的实际参数,我们认为只要描述对象相同,也就是说只要调用的方法和执行该方法时的实际参数相同,就认为最后执行的结果肯定是满足预期的,这样可以方便的进行单元测试,...通过转化effects函数,可以方便进行单元测试 完善和严谨的流程控制,可以较为清晰的控制复杂的逻辑。

4.5K30

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

本文的目标 2.2 在 Vue 应用的单元测试 Vuex store 该如何测试?如何测试与 Vue 组件之间的交互? // Given 一个有基本的UT知识和Vue组件单元测试经验的开发者?...阅读和练习本文的Vuex单元测试的部分 // Then 他能够Vuex概念的理解更加深入,且知道 `Redux-like` 架构的好处 他能够合理测试vuex store的mutation、getter...的业务逻辑和异步action 他能够测试组件如何正确读取store的state以及dispatch action 如何理解 Vuex 模式?...如何 Vuex 进行单元测试 得益于 Vuex 能够将 Vue 应用的共享状态进行隔离,我们的代码也因此变得更加结构化且易于维护,Vuex 的 mutation、action 和 getter 都被放在了合理的位置...,承担不同的职责 ,这也使得它们进行单元测试变得容易很多。

1.6K30

2018年不能错过的 14 个 Java 库!

(4)响应进行 缓存 ,可以完全避免重复请求的网络。 ? Retrofit 用于Android的类型安全的HTTP客户端,能够将HTTP API转为Java接口。 ?...独立应用程序可以直接调用他们选择的日志框架。...参数可以作为CSV字符串或参数提供程序类传递 参数提供程序类可以具有任意多个提供所需方法的参数,以便可以对不同的案例进行分组 你可以有一个提供参数的测试方法(不再有外部类或静态) 您可以在IDE查看实际的参数值...WireMock 模拟HTTP服务的工具: HTTP响应stubbing存根,匹配HTTP的URL、头部和正文内容 请求验证 在单元测试运行,作为独立进程或作为WAR应用程序运行 可通过流畅的Java...API,JSON文件和通过HTTP的JSON进行配置 记录/回放存根 故障注入 每次请求的条件代理 浏览器代理请求检查和替换 状态行为模拟 可配置的响应延迟 ?

1.6K10

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

TL;DR——什么是好的单元测试? 其实我是个标题党,单元测试根本没有“艺术”可言。 好的单元测试来自于好的代码,如果说有艺术,那也是代码的艺术。 注:以下“测试”一词,非特指均为单元测试。...单元测试的好坏在于“单元”而不在“测试”。如果一个系统毫无单元可言,那就没法进行单元测试,几乎只能用Selenium做大量的E2E测试,其成本和稳定性可想而知。...不过具体到单元测试方面,得益于Virtual DOM本身和模块化设计(不然全家桶白叫了),React全家桶明显更优秀些。 测试工具 我们本篇的测试有三个目标:学得快,写得快,跑得快。...我们用一个叫做Redux-saga的库来展现全家桶的异步测试怎么写,Redux模仿的目标是Elm architecture,但是简化掉了Elm的作用模型,只保留了同步模型,Redux-saga其实就是把...}) 你看我们的测试连异步操作都还可以无耻地判等。call就是以某些参数调用某个函数,put就是发事件。

1.1K72

手写Redux-Saga源码

本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多的Redux异步解决方案。...Redux-Saga比Redux-Thunk复杂得多,而且他整个异步流程都使用Generator来处理,Generator也是我们这篇文章的前置知识,如果你Generator还不熟悉,可以看看这篇文章...进行了检测,通过他的类型获取对应的处理函数,然后进行处理,我这里代码简化了,只支持IO这种effect,官方源码还支持promise和iterator,具体的可以看看他的源码:github.com/redux-saga...因为我们的代码在不同的环境下运行可能会产生不同的结果,特别是这些异步请求,我们写单元测试时来造这些数据也会很麻烦。...我们调用的effects和真正实现功能的函数是分开的,表层调用的effects只会返回一个简单的对象,这个对象描述了当前任务,他是稳定的,所以基于effects的单元测试很好写。

1.7K30

单元测试】--高级主题

一、模拟与存根深入 在单元测试,模拟(Mock)和存根(Stub)是两种常用的测试替代品,用于模拟外部依赖或模拟特定行为,以便测试能够独立运行。...在NUnit,你可以使用第三方库,Moq,来创建和操作模拟对象。...它不仅可以用于模拟外部依赖,还可以用于测试的一部分,以确保测试环境的可控制性。在NUnit,你可以直接创建存根对象。...在NUnit或其他单元测试框架,你可以使用适当的库或手动创建模拟和存根对象来实现这些功能。...四、总结 模拟与存根用于单元测试,模拟模拟外部依赖,存根模拟特定行为。测试金字塔强调多层次测试,包括单元测试、集成测试、服务测试和UI测试。

19020

redux-saga

call/apply Effect -> 业务操作 在执行时内部进行转换,例如把[Effect1, Effect2]转换为并行调用 类似于装箱(把业务操作用Effect包起来)拆箱(执行Effect里的业务操作...所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用的Promise由redux-saga内部生成 这样做的好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...从单元测试的角度来看,Effect相当于把参数提出去了,让“比较传入参数是否相同”这一步可以在外面统一进行,而不用逐个mock替换 P.S.关于易测试性的更多信息,请查看Testing Sagas 另外...),这不很过分 注意,不需要mock异步函数只是简化了单元测试的一个环节,即便使用这种对比描述对象的方式,仍然需要提供预期的数据,例如: // 测试场景直接执行 const iterator = fetchProducts...常用的Effect creator如下: 阻塞型方法调用:call/apply 详见Declarative Effects 非阻塞型方法调用:fork/spawn 详见redux-saga’s fork

1.9K41

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

设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 的最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...中间 store 的内容都是 redux 相关的,看名称应该都能知道意思了。 具体的代码请看这里:https://github.com/deepfunc/react-test-demo。...sagas 这里我用了 redux-saga 处理业务流,这里具体也就是异步调用 api 请求数据,处理成功结果和错误结果等。...可能有的童鞋觉得搞这么复杂干嘛,异步请求用个 redux-thunk 不就完事了吗?别急,耐心看完你就明白了。 这里有必要大概介绍下 redux-saga 的工作方式。...saga 是一种 es6 的生成器函数 - Generator ,我们利用他来产生各种声明式的 effects ,由 redux-saga 引擎来消化处理,推动业务进行

3K30

Zustand:让React状态管理更简单、更高效

这些新兴的库不仅可以完全替代Redux,而且提供了更为简单的选择。Zustand凭借其简洁的API、低学习曲线和TypeScript的无缝支持,成为了众多选项的热门之选。...接下来,我们将通过一个简单的计数器示例以及如何在状态存储数组,来展示如何在React项目中使用Zustand。 1. 安装Zustand 首先,你需要在项目中安装Zustand。...然而,Redux的一些特性,冗长的代码、actions、reducers和中间件等概念的引入,对于新手来说可能会显得有些复杂,增加了应用程序的复杂度。...这个解决方案展示了如何在Zustand的状态管理应对组件依赖于状态变化时的自动更新问题,确保应用界面与状态同步,提升用户体验。...它是对于复杂状态管理解决方案Redux的一个极佳替代品,特别适合那些需要轻量级足迹的中小型应用。

44810

何在 Spring 中使用依赖注入

结果,您的类变得更容易测试,特别是当依赖项位于接口或抽象基类上时,这允许在单元测试中使用存根或模拟实现。 “好吧好吧,但我还是不明白这一切的要点,请你说得更清楚些?” ...当然,我们的目标是如何在代码中使用他,吧?因此,让我们看一下这是如何在代码上工作的。...以下是我们如何在传统编程创建对象依赖关系: public class Store { private Item item; public Store() { item...bean 后调用 bean 上的 setter 方法来实现的。...字段注入单元测试不友好,必须使用Spring IoC容器来创建这些bean(和IoC容器强耦合),但是原则上单元测试要快,启动IoC容器太慢,如果是构造注入,我们可以把bean当作一个普通的类来创建对象

28420

干货 | 如何一步步打造基于React的移动端SPA框架

现今前端新技术井喷一样层出不穷,且各有特点和使用场景,交互变得前所未有的复杂,那么,在众多框架,如何选择又如何落地呢? 前端框架作为工具,是各种模式,结构的集合,一个原则就是:“非必要,不换”。...只要你编程技能在提升,你就会不知不觉代码功能进行模块化,跟你使用什么类库没关系。不是你不使用CommonJS,AMD,CMD,ES6就不能模块化,一个对象都可以算一个模块。...这其实是在项目前期,我们心里Redux还是有所抵触,思维要从原来的操作DOM到操作React这种状态操作,同时从React直接操作状态到通过action去更改组件状态,的确需要时间消化。...写单元测试要注意的几点: 不要写对接口返回结果测试的代码,那是接口测试的范畴。单元测试只关注传值是否正确。 业务代码不要写框架方法的单元测试,业务代码只需要验证调用的方法和传值是否正确。...框架的单元测试代码自有框架去写。 不要写能功能测试,单元测试单个方法逻辑的检验。如果要涉及到多个方法或这个功能依赖,要么单元测试思路有问题,要么就是代码需要重构。

1.7K100

瑜亮之争:Vue与React的差异

还可以通过将 Redux 和 vuex进行比较来看出这一点 —— 在 Redux ,当你想要修改一个已有的 store 时,会生成一个新的 store,而在 Vuex 则会直接修改已经存在的 store...Reducer 是同步的,要实现异步的话,可以在组件中进行修改,也可以通过插件( redux-thunk)来将异步 action 增加到应用程序。...组件单元测试 React 组件进行单元测试的常用解决方案是使用 Enzyme。Enzyme 是一个由 Airbnb 开发的库,使用它可使加载和测试组件变得更加容易。...本文节选自《Vue.js快跑:构建触手可及的高性能Web应用》一书附录Vue与React异同的分析和对比,对于尚未入坑的前端工程师有一些借鉴作用。...本书适合HTML和JavaScript已有一定了解,正在准备或已经使用Vue.js进行Web应用开发的从业者,也适合希望通过学习框架使用来提升其认识的开发人员,有React使用经验的读者同样可从中获得启发

1.2K20

写给精明Java开发者的测试技巧

迪米特法则可以表述为一系列的规则: 在方法,一个类的实例可以调用该类的其它方法; 在方法,实例可以查询自己的数据,但不能查询数据的数据(译者注:即实例的数据比较复杂时,不能进行嵌套查询); 当方法接收参数时...在这里我为各位读者留下一个练习:这个方法进行完全重构,使其更容易被测试。但对于新手来说,我们可能会将 aParameter.getValue() 对象作为一个参数传递给这个方法。...了解何时使用断言 对于编写应用程序测试来说,JUnit和TestNG都是非常优秀的框架,它们提供了许多不同的方法在测试一个值进行断言。例如,检查两个值是相同还是不同,或者值是否为空。...当你想在代码片段强行设定某些条件时,存根会很有用,例如,如果数据库调用失败,而你希望在测试触发数据库异常处理。存根是模拟对象个一个特例。...结论 在这篇文章,我介绍了五个基本原则,这些原则会帮助我们针对应用程序编写单元测试。如果你有任何想法,欢迎通过下面的评论进行分享,或者你可以在Twitter上找到我:@cocoadavid。

2.1K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券