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

React.How我要通过jest检查redux吗?

React是一个用于构建用户界面的JavaScript库。它提供了一种声明式的编程模型,使得构建可复用的组件变得更加简单。而Redux是一个用于管理应用状态的JavaScript库,它与React结合使用可以实现可预测的状态管理。

在React中使用Redux时,可以使用Jest进行单元测试和集成测试。Jest是一个流行的JavaScript测试框架,它提供了丰富的断言库和模拟功能,可以方便地测试Redux相关的代码。

要通过Jest检查Redux,首先需要安装Jest和相关的测试工具。可以使用npm或yarn进行安装:

代码语言:txt
复制
npm install --save-dev jest redux-mock-store

代码语言:txt
复制
yarn add --dev jest redux-mock-store

安装完成后,可以编写针对Redux的测试用例。通常,测试Redux涉及以下几个方面:

  1. Action Creators:测试Action Creators的返回值是否符合预期,以及是否正确地触发了相应的Action。
  2. Reducers:测试Reducers的初始状态和各个Action对状态的影响,以及Reducers的返回值是否符合预期。
  3. Store:测试Store的创建和初始化,以及Dispatch Action后状态的变化是否符合预期。
  4. 异步操作:测试Redux中的异步操作,例如使用Redux Thunk或Redux Saga处理异步Action。

下面是一个使用Jest测试Redux的示例:

代码语言:txt
复制
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchPosts, FETCH_POSTS_SUCCESS } from './actions';

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

describe('fetchPosts', () => {
  it('dispatches FETCH_POSTS_SUCCESS after successful API request', () => {
    const expectedActions = [
      { type: FETCH_POSTS_SUCCESS, payload: { /* expected payload */ } }
    ];

    const store = mockStore({ /* initial state */ });

    return store.dispatch(fetchPosts()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

在上述示例中,我们使用了redux-mock-store来创建一个模拟的Redux Store,并使用thunk作为中间件来处理异步Action。然后,我们编写了一个测试用例来测试fetchPosts Action Creator是否正确地触发了FETCH_POSTS_SUCCESS Action。

需要注意的是,上述示例中的代码只是一个简单的示例,实际的测试用例可能更加复杂,涉及到更多的Action、Reducer和Store的测试。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供弹性计算能力,支持多种操作系统和应用场景。产品介绍
  • 云数据库 MySQL版(CDB):提供高性能、可扩展的关系型数据库服务。产品介绍
  • 云原生容器服务(TKE):基于Kubernetes的容器管理服务,提供高可用、弹性伸缩的容器化应用部署和管理。产品介绍
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能开发工具和算法模型,帮助开发者快速构建和部署AI应用。产品介绍

请注意,以上推荐的产品和链接仅供参考,具体选择应根据实际需求和情况进行。

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

相关·内容

年轻时,不写单元测试

笔者在这里试着归纳了一下解决问题的办法 样式问题需要制定相应的规范 不能使用css,只能用less来书写(大哥,都2888年了还不用less) 使用less的类模块化写法 命名风格采用BEM (推荐)...那这时候我们就会有一个问题了,那如果单元测试通过了,那到底能不能就不需要测试同学再测试就直接上线了呢?...展示型组件测试 展示型组件测试,意思就是确保每一次的修改都是符合预期的,这里笔者着重介绍下jest框架里面的snapshot功能。...一开始觉得单元测试很鸡肋的原因也是没有深入了解它,这次发现就算是和业务结合很紧密的组件,也能够模拟正常的操作,这里就贴一个和redux结合的组件来举例 import React from 'react...maker/redux/store'; import { updateAppInfo } from '@/entries/maker/redux/action'; import moxios from

86220

Jest来给React完成一次妙不可言的~单元测试

•每次代码提交之前都要求通过冒烟测试。(自测,简单走下主流程)•各种类型的整体代码覆盖率大于50%。•小型测试的覆盖率大于10%。 •级别3 •所有重要的代码变更都要经过测试。...唯一的区别是,我们使用 getByTestId 选择必要的元素(根据 data-testid )并检查是否通过了测试。...5.测试 React Redux 让我们检查一下 TestRedux.js 是什么样子的。...对于第一个测试,我们检查内容是否等于About页面中的文本,对于第二个测试,我们测试路由参数并检查它是否正确通过。 现在我们可以进入最后一节,学习如何测试Axios请求。 8....现在我们测试三件事: •如果HTTP请求已经正确完成•如果使用url完成了HTTP请求•如果获取的数据符合期望。 对于第一个测试,我们只检查加载消息在没有数据显示时是否显示。

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

    在较大规模的前端项目中,测试对于保证代码质量十分重,而React的组件化和函数式编程, 这种相同输入一定返回相同输出的幂等特性特别适合单元测试。...快照测试:能够创造一个当前组件的渲染快照,通过和上次保存的快照进行比较,如果两者不匹配说明测试失败。 测试报告:内置了Istanbul,通过一定配置可以测试代码覆盖率,生成测试报告。...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过Jest相互配合可以提供完整的...": "16.9.0", "redux-mock-store": "^1.5.3" //Redux测试模拟store } 根目录下添加jest.config.js文件作为配置文件: module.exports...expect(cityInfo[1]).toBe('上海'); expect(cityInfo[2]).toBe('上海'); }); }); 十一、单元测试覆盖率及husky做代码提交检查

    6.1K30

    前端测试体系建设与最佳实践总结

    单元测试:是指对软件中的最小可测试单元进行检查和验证,通常指的是独立测试单个函数。 UI 测试:是对图形交互界面的测试。 集成测试:就是测试应用中不同模块如何集成,如何一起工作,这和它的名字一致。...端到端测试(e2e):是站在用户角度的测试,把我们的程序看成是一个黑盒子,不懂你内部是怎么实现的,只负责打开浏览器,把测试内容在页面上输入一遍,看是不是想要得到的结果。...认为只需要简单的覆盖主流程,比如我们的点餐业务,从最开始的选择人数页进入菜单页,进行加菜,减菜,再进入下单页下单等。e2e 还需要对 Jest 做一点配置。...通过 Jest 里的 collectCoverageFrom 配置改变测试统计的范围,最终项目的测试覆盖率要求为 Statement 60%, Branches 60%, Functions 60%,...,因为我们的测试编写原则就是充分考虑数据的边界条件。 能够方便重构。 在原有逻辑增加新功能时,通过运行之前的测试,能够大大提高迭代的质量和稳定性。

    5.3K30

    2020 年你应该知道的 React 库

    www.robinwieruch.de/react-libraries React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到构建一个...当我从 Angular 切换到 React,绝对经历了它作为 React 的优势。 只有通过 React,您才能使用函数组件和 props 构建组件驱动的用户界面。...当使用这样的类型检查器时,您可以在开发期间获得错误。您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。这样一来,类型检查器就可以提高您的开发人员体验,避免首先引入 bug。...就个人而言,不使用它,但是任何时候有人问到 JS 中的不变性(immutability),大家都会指出 Immer,并且这可以加上 redux 或 React hooks。...否则你可以通过使用普通的 React 来保持轻量级。因此,这里再次列出了可以补充 React 作为应用程序关于不同项目大小的核心的库。请记住,这个列表是的个人看法,也渴望得到你的反馈。

    14.4K40

    React + Redux Testing Library 单元测试

    单元测试的意义 如果你说的业务部门不需要频繁上线,并且有足够的人力来覆盖手工测试,那你可以不用单元测试 如果你说不在意代码腐化,并且也不做重构,那你可以不用单元测试 如果你说不在意代码质量,好几个没有测试保护的.../Mock/Spy 这些概念或许会有所混淆,而这跟 JavaScript 语言本身的特点有一定关系,但是觉得 Jest 通过统一的 fn() 方法把问题解决得还比较恰当,让我们来一块儿看看实例?...,jest.fn() 代表着就是一个 Stub(桩),“你来就在这里,你走也依然在这里,风雨无阻”。...而另一种特定行为就是返回特定的数据,即 Stub 也可以根据输入模拟返回一种输出,作为某些模块的替身帮它演戏,比如“小鲜肉们”遇到跳车啦、卿卿(误)的时候就要找替身,“一二三四五六七八”连台词都不用背还需要配音...CQRS 与 Flux 架构 image.png 而 Flux 以及我们学习的 Redux 则是试图通过强制单向数据流来解决这个复杂度。

    2.3K10

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

    这么简单的界面和业务逻辑,还是真实场景,还需要写神马单元测试? 别急,为了保证文章的阅读体验和长度适中,能讲清楚问题的简洁场景就是好场景不是?慢慢往下看。...设计模式与结构分析 在这个场景设计开发中,我们严格遵守 redux 单向数据流 与 react-redux 的最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...actions 业务里面使用了 redux-actions 来产生 action,这里用工具栏做示例,先看一段业务代码: import { createAction } from 'redux-actions...sagas 这里用了 redux-saga 处理业务流,这里具体也就是异步调用 api 请求数据,处理成功结果和错误结果等。...从上面的注释 3、4 可以看到, redux-saga 还提供了一些辅助函数来方便的处理分支断点。 这也是选择 redux-saga 的原因:强大并且利于测试。

    3.1K30

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

    让我们来看看 Vuex 的历史,Vuex 借鉴于 Redux,而 Redux 的实现构想则最初出身于 Flux ,这是一个由 Facebook 为其应用所设计的应用程序架构。...而 Flux 以及我们学习的 Vuex 则是试图通过强制单向数据流来解决这个复杂度。...而 Stores 只能通过 Actions 被更新,这就会影响 Store 本身而不是那些只读的数据。...store 交互的时候引入一个真实的 Store,那样就不再是单元测试了,还记得我们在第二篇单元测试基础中所提到的社交型(Social Tests)还是独立型(Solitary Tests)测试单元?...未完待续…… ## 单元测试基础 ### 单元测试与自动化的意义 ### 为什么选择 Jest ### Jest 的基本用法 ### 该如何测试异步代码?

    1.6K30

    【送红宝书】JavaScript 测试系列实战(四):掌握 React Hooks 测试技巧

    在这篇文章中,我们将体验强大的 react-hooks-testing-library,学习如何去测试钩子的同步和异步逻辑,并最终通过一个完整的例子去了解如何结合 Redux 框架进行测试。...通过 npm test 运行测试,全部通过!由于我们丰富了测试用例,对 useModalManagement 钩子的信心也大增!...注意 在编写 Jest 异步测试用例时,如果涉及到 Promise 的使用(包括 async/await ),确保 return 一个值,否则测试会超时。详细介绍请参考 Jest 异步测试文档。...提示 你也许还记得前面的课程中,我们讲到了如何用 Jest Mock 去避免发起真正的 HTTP 请求,从而能够保证测试不会因为网络问题而挂掉。...在下一篇教程中,我们终于接触激动人心的端到端(E2E)测试了,敬请期待吧!

    2.1K00

    Vue 应用单元测试的策略与实践 02 - 单元测试基础

    当中,Fake/Stub/Mock/Spy 这些概念或许会有所混淆,而这跟 JavaScript 语言本身的特点有一定关系,但是觉得 Jest 通过统一的 fn() 方法把问题解决得还比较恰当,让我们来一块儿看看实例...,jest.fn() 代表着就是一个 Stub(桩),“你来就在这里,你走也依然在这里,风雨无阻”。...而另一种特定行为就是返回特定的数据,即 Stub 也可以根据输入模拟返回一种输出,作为某些模块的替身帮它演戏,比如“小鲜肉们”遇到跳车啦、卿卿(误)的时候就要找替身,“一二三四五六七八”连台词都不用背还需要配音...意犹未尽?更加 Jest 相关的内容可以查看这篇文章 Testing JavaScript with Jest,与此同时具体的 API 可以参考官方文档。...## Vue 单元测试 ### Vue 组件的渲染方式 ### Wrapper find() 方法与选择器 ### UI 组件交互行为的测试 ## Vuex 单元测试 ### CQRS 与 Redux-like

    2.2K20

    Vue 应用单元测试的策略与实践 01 - 前言和目标

    [^322](https://github.com/JimmyLv/jimmylv.github.io/issues/322) 为什么 TDD?但是我会讲为什么 UT 单元测试。...# Vue 单元测试 ### Vue 组件的渲染方式 ### Wrapper `find()` 方法与选择器 ### UI 组件交互行为的测试 ## Vuex 单元测试 ### CQRS 与 `Redux-like...如果你说不在意代码腐化,并且也不做重构,那你可以不用单元测试 如果你说不在意代码质量,好几个没有测试保护的 if-else 裸奔也不在话下,脑不好还做什么程序员,那你可以不用单元测试 如果你说确有快速部署的需求...其实这里的子标题就是为什么选择 Jest?有时候安于现状,只不过是因为我们没有见过理想的模样。只有当我们见过更好的世界和更好的测试框架,才会惊呼“原来世界是这样美好呀!怎么都没有想到呢?” ?...与此同时 Jest 非常注重开发者体验,这一点也是特别值得欣赏,现在市面上关注开发者(“人”)体验的开发框架和工具实在不多,而 Jest Watch 模式的核心就在于快速获得反馈,虽然没在命令行使用而是

    88140

    Angular React Vue应该选择什么?

    以下是我们今天解决的问题: 这些框架或库有多成熟? 这些框架只会火热一时? 这些框架相应的社区规模有多大,能得到多少帮助? 找到每个框架开发者容易? 这些框架的基本编程概念 是什么?...以下是我们今天解决的问题: 这些框架或库有多成熟? 这些框架只会火热一时? 这些框架相应的社区规模有多大,能得到多少帮助? 找到每个框架开发者容易? 这些框架的基本编程概念 是什么?...状态是只读的,只能通过 action 来改变,以避免竞争条件(这也有助于调试)。编写 Reducer 来指定如何通过 action 来转换 state。...为了检查性能,看了一下最佳的 js 框架基准。你可以自己下载并运行它,或者查看交互式结果表。 ? Angular,React 和 Vue 性能比较(源文件) ?...测试 Facebook 使用 Jest 来测试其 React 代码。这里有篇 Jest 和 Mocha 之间的比较的文章 —— 还有一篇关于 Enzyme 和 Mocha 如何一起使用 的文章。

    2.9K20

    万字详文:彻底搞懂 Jest 单元测试框架

    什么是Jest 测试意味着什么 怎么知道测试什么 测试块,断言和匹配器 如何实现测试块 如何实现断言和匹配器 CLI 和配置 模拟 怎么模拟一个函数 执行环境 作用域隔离 V8 虚拟机 运行单测回调...有许多类型的测试,很快你就会被术语淹没,但长话短说的测试分为三大类: 单元测试 集成测试 E2E 测试 怎么知道测试什么 在测试方面,即使是最简单的代码块也可能使初学者也可能会迷惑。...最常见的问题是“怎么知道测试什么?”。 如果您正在编写网页,一个好的出发点是测试应用程序的每个页面和每个用户交互。但是网页其实也需要测试的函数和模块等代码单元组成。...对于这两种情况,你可以通过将测试视为:检查该函数是否产生预期结果。最典型的测试流程如下所示: 导入测试的函数 给函数一个输入 定义期望的输出 检查函数是否产生预期的输出 一般,就这么简单。...,只提炼了比较关键的部分,所以附上本人读 Jest 源码的个人笔记供大家参考。

    7.7K20

    微信支付大规模前端开发背后,如何用外包解决困境

    比如一个前端请求过来,会统一经过安全过滤器做过滤,再通过一个业务鉴权过滤器进行鉴权。...然后到了契约检查器,可以检查配给前端的契约参数是否按照契约规定进行传输,以及一些回包也可以通过契约检查器进行判断,保证回包是按照当时契约制定的格式进行回包。...通过CRR编译器,把CR代码转换成虚拟语法树的结构,在里面注入redux产生的额外代码,写的时候就像写小程序一样,只需要在几个文件里进行编译。...为了在生产自动化测试用例这一块能更好地提升效能,去年年底提出了一个无痛前端自动化测试的概念,给它取名为PFAT。 ? PFAT的灵感来自于react+redux单向数据流的思路。...Jest的方式比较传统,额外写代码;PFAT可以一键录制需要的用例,更方便。PFAT比Jest更加无痛。 PFAT对于测试验收效率提升的重大意义就是拥有了回放BUC的能力。

    1.6K60

    有哪些值得学习的大型 React 开源项目?

    大家好,是 ConardLi。 之前有很多小伙伴问过通过文档或者视频学习 React 已经有一段时间了,想学习一些好的开源项目来获得一些实战经验。...之前也没有很好的答案,确实很难找,因为一般企业级应用都是不开源的,Github 上大部分都是很简单的 DEMO 项目,很难挑选。 今天就给大家梳理了几个觉得还不错的 React 开源项目。...它使用 PropTypes 进行类型检查,使用 Jest 和 Enzyme 进行单元测试(覆盖率已经达到 98% ),使用 Cypress 进行端到端测试,使用 styled-components 编写样式...使用 PropTypes 进行类型检查,使用 Redux 进行状态管理。 虽然你不会在这里找到像 TypeScript/Flow 这样的花哨的东西,但它的代码注释很完善,也很清楚地指出了很多编码技巧。...代码库使用 Flow 进行类型检查,使用 Apollo (GraphQL) 进行数据获取,使用 Redux 进行状态管理,使用 Express 服务器进行服务器渲染,并编写了大量的自定义 React Hooks

    6.2K20

    「前端架构」Grab的前端学习指南

    开发经验——在开发过程中,我们花了很多精力来创建工具来帮助调试和检查应用程序,比如Redux DevTools。 您的应用程序可能必须处理异步调用,如发出远程API请求。...Jest可以保存React组件和Redux状态生成的输出,并将其保存为序列化文件,这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...Jest和酶使编写前端测试变得有趣和容易。因为定义了明确的职责和接口,所以React组件和Redux操作/缩减器相对容易测试也很有帮助。...对于Redux还原器,我们可以测试给定的一个先验状态和一个动作,会产生一个结果状态。 Jest和ase的文档非常简洁,通过阅读它们应该就足够了。 预计持续时间:2-3天。...尝试为你的React + Redux应用程序编写Jest +Enzyme!

    7.4K20

    Jest 进行 JavaScript 测试

    Jest 是目前最受欢迎的测试运行器之一,也是 Create React App 的默认选择。 首先要做的事情:怎么知道测试些什么? 当谈到测试时,即使是简单的代码块也会使初学者瘫痪。...最常见的问题是“怎么知道测试些什么?”。如果你正在编写 Web 应用,那么一个好的起点就是测试应用的每个页面和每个用户交互。但 Web 应用也由单元代码组成,如函数和模块,也需要进行测试。...对于这两种情况,你可以通过考虑代码来检查,以检查给定函数是否产生预期结果**。以下是典型测试流程的样子: 应该怎么办?对于这两种情况,你可以通过将测试看作检查给定函数是否产生预期结果的代码来帮助自己。...尝试通过测试添加的新语句来达到100%的代码覆盖率。...Jest的HTML代码覆盖率报告 如果单击函数名称,你还会看到确切的未经测试的代码行: ? 单个文件的Jest代码覆盖率报告 很整洁不是?使用代码覆盖,你可以在有疑问时发现测试的内容。

    2.7K30
    领券