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

如何让redux的开发工具与jest和酶协同工作?

为了让redux的开发工具与jest和酶协同工作,可以按照以下步骤进行设置和配置:

  1. 安装redux-devtools-extension:在项目中安装redux-devtools-extension包,该包提供了redux开发工具的浏览器扩展。
  2. 配置redux-devtools-extension:在创建redux store时,使用compose函数将redux-devtools-extension的enhancer添加到store的中间件链中。示例代码如下:
代码语言:txt
复制
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(...middlewares)));
  1. 配置jest测试环境:在jest的配置文件(通常是jest.config.js)中,添加如下配置,以使redux开发工具在测试环境中正常工作:
代码语言:txt
复制
module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  // 其他配置项...
};
  1. 创建jest.setup.js文件:在项目根目录下创建jest.setup.js文件,并添加以下代码:
代码语言:txt
复制
import 'jest-enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-xx'; // 适配器的具体名称根据你使用的React版本而定

configure({ adapter: new Adapter() });
  1. 运行测试:现在,你可以运行jest测试,并确保redux开发工具与jest和酶协同工作。你可以使用redux开发工具来检查测试期间的状态变化和操作。

这样,你就可以让redux的开发工具与jest和酶协同工作了。请注意,以上步骤中的一些细节可能因你的项目配置而有所不同,需要根据实际情况进行调整。

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

相关·内容

FEA和FEM是如何协同工作的

有限元法(FEM)和有限元分析(FEA)协同工作,让工程师了解特定设计的结构,以便工程师可以发现工件的弱点并改进它们。...该仿真将整个模型分解成一个网格内的更小的单元,工程师们用这些单元来测试设计不同元素如何相互作用,以及在模拟的应力下的表现。...FEA和FEM的优点 提高精度和增强设计:FEA和FEM可以提高结构分析的精度,因为它们可以深入了解设计的各个元素是如何在细微细节上相互作用的。它们还允许工程师研究设计的内部和外部。...快速和廉价的测试:因为FEM和FEA允许工程师创建模拟的工程,他们减少了对物理原型和测试的需求,这节省了时间和成本。...FEM背后的数学原理也可以应用到其他领域,比如计算流体动力学(CFD)和结构的热动力学。 “例如,如果你知道一个物体某一点的温度,要如何得到一个时间和温度的关系?”

88130

图解Dubbo和ZooKeeper是如何协同工作的?

介绍 微服务是最近比较火的概念,而微服务框架目前主流的有Dubbo和Spring Cloud,两者都是为了解决微服务遇到的各种问题而产生的,即遇到的问题是一样的,但是解决的策略却有所不同,所以这2个框架经常拿来比较...节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务注册与发现的注册中心 Monitor 统计服务的调用次数和调用时间的监控中心...服务消费者和提供者,在内存中累计调用次数和调用时间,定时每分钟发送一次统计数据到监控中心。 要使用注册中心,只需要将provider.xml和consumer.xml更改为如下 --> 注册信息在zookeeper中如何保存...最后一个节点中192.168.1.104是小编的内网地址,你可以任务和上面配置的localhost一个效果,大家可以想一下我为什么把最后一个节点标成绿色的。

2.7K31
  • 「微服务架构」编曲与编舞——让系统协同工作的不同模式

    例如,营销团队努力争取新客户,销售团队向这些客户销售产品,客户关系团队负责积极的客户体验和保留。只有当这些团队一起工作时,才能实现共同的业务目标和利润。...如何组合和安排他们的服务以实施业务流程管理的问题是定义整个组织如何运作的关键部分。今天我们将讨论这样做的最佳方法。我们有编排模式和编排模式——我们在辩论中的演讲者。你能介绍一下自己吗?...如果 CRM 系统在客户端同步中没有响应,您将如何反应?您需要围绕通知在线商店有关情况来实现重复和业务逻辑。让我用这个缺失的部分重新表述你的设计。...然而,你说得有道理——与我一起计划和管理比与 Orchestration 更难。 第 2 轮:变更管理 Krzysztof(采访者):感谢您在第一轮中进行的激动人心的讨论。...我只是喜欢我的架构组件是自主的和独立工作的,提供特定的、定义明确的业务功能——而不是一个复杂的 Orchestrator,很容易成为组织的中央 IT 系统。

    60830

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

    测试- - Jest + Enzyme Jest是Facebook的一个测试库,旨在让测试过程无痛苦。与Facebook项目一样,它提供了一种开箱即用的良好开发体验。...Jest可以保存React组件和Redux状态生成的输出,并将其保存为序列化文件,这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...Jest和酶使编写前端测试变得有趣和容易。因为定义了明确的职责和接口,所以React组件和Redux操作/缩减器相对容易测试也很有帮助。...Jest和ase的文档非常简洁,通过阅读它们应该就足够了。 预计持续时间:2-3天。尝试为你的React + Redux应用程序编写Jest +Enzyme!...我们发现与TypeScript相比,Flow的学习曲线更低,并且将现有的代码库迁移到Flow所需的工作相对较少。Flow由Facebook打造,与React生态系统的整合性更好。

    7.5K20

    有关Prometheus和Thanos的所有信息、差异以及它们如何协同工作。

    Grafana(可选):一种流行的可视化和监控工具,可以与 Prometheus 集成。Grafana 允许用户创建自定义仪表板并以具有视觉吸引力和交互的方式可视化 Prometheus 指标。...Thanos 也是一个开源项目,是为 Prometheus 构建的扩展,旨在解决与长期存储和高可用性相关的一些挑战。...借助 Thanos,您可以扩展 Prometheus 部署并处理更大的工作负载,而无需牺牲性能或冒数据丢失的风险。 长期存储:Thanos 引入了长期存储和查询历史数据的能力。...高可用性:Thanos的容错设计与远程写入的使用相结合,即使在单个Prometheus实例或Thanos组件出现故障的情况下,也能确保数据的可靠性和可用性。...充足的文档、培训资源和社区支持可以帮助缓解这一挑战。 运营费用增加 将 Thanos 与 Prometheus 一起引入会增加运营开销。

    49610

    同样做前端,为何差距越来越大?

    前端应用越来越复杂,技术框架不断变化,如何成为一位优秀的前端工程师,应对更大的挑战?今天,阿里前端技术专家会影结合实际工作经验,沉淀了五项重要方法,希望能对你的职业发展、团队协作有所启发。...过去一年,阿里巴巴新零售事业群支撑的数据相关业务突飞猛进,其中两个核心平台级产品代码量急速增长,协同开发人员增加到数十人。...无论如何优化,始终要遵循 Redux 三原则: ? 这三个问题我们是通过自研 iron-redux 库【1】来解决,以下是背后的思考: 如何组织 Action?...最终我们得到如下扁平的状态树。虽庞大但有序,你可以快速而明确的访问任何数据。 ? 如何减少样板代码? 使用原生 Redux,一个常见的请求处理如下。...工具回归简单方便的 CSS,不断打磨自己的开发工具来保证开发规范高效,并严格彻底实行 Code Review 促进人的交流和提升。

    1.2K20

    给2019前端开发的你5个进阶建议~

    过去一年我们支撑的数据相关业务突飞猛进,其中两个核心平台级产品代码量分别达到30+万行和80+万行,TS 模块数均超过1000个,协同开发人员增加到20+人。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发的问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...,大量样板代码 这三个问题我们是通过自研 iron-redux 库来解决,以下是背后的思考: 如何组织 Action?...虽庞大但有序,你可以快速而明确的访问任何数据。 ? Redux 状态树 如何减少样板代码? 使用原生 Redux,一个常见的请求处理如下。...工具回归简单方便的 CSS,不断打磨自己的开发工具来保证开发规范高效,并严格彻底实行 Code Review 促进人的交流和提升。

    1K10

    React + Redux Testing Library 单元测试

    单元测试客观上可以让开发者的工作更高效,React 应用的单元测试是一定要的。 单元测试的上下文 image.png 谈任何东西都一定要有个上下文。...CQRS 与 Flux 架构 image.png 而 Flux 以及我们要学习的 Redux 则是试图通过强制单向数据流来解决这个复杂度。...如何对 Redux 进行单元测试 得益于 Redux 能够将 React 应用的共享状态进行隔离,我们的代码也因此变得更加结构化且易于维护,Redux 中的 reducer、action 和 selector...}); React 组件和 Redux store 的交互 前面我们讲完了 Redux 单元测试所需要的基本知识,而 React 组件需要从 Redux store 读取状态或者是发送 action...接下来就来聊聊如何用 React Test Utils 测试 React 组件中的 Redux。

    2.4K10

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

    在前端人力极其匮乏的条件下我们另辟蹊径,大规模引入外包团队协同作业,并且在如何保证效率和质量,控制版本变更风险,保证可持续性等方面做了不少研究实践,借此机会跟大家分享交流。...由这些同学负责制定每一个系统实施的技术方案,整理微服务文档,指导外包团队工作,最后配合需求发起方验收工作成果。...有了官方提供的UI组件库,他们后续可以直接拿高质量的react组件库进行开发,提升了外包团队的效率和质量。 CRR研发框架就是一个简易版的react+redux,目前正在开发中。...把PFAT做成浏览器插件,显示、隐藏灵活,不干扰正常体验和验收工作,后台录制操作过程并可以直接保存。就能将PFAT无痛嵌入正常的研发流程中。 ?...Jest的方式比较传统,要额外写代码;PFAT可以一键录制需要的用例,更方便。PFAT比Jest更加无痛。 PFAT对于测试验收效率提升的重大意义就是拥有了回放BUC的能力。

    1.6K60

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

    本文的目标 2.2 在 Vue 应用的单元测试中,对 Vuex store 该如何测试?如何测试与 Vue 组件之间的交互? // Given 一个有基本的UT知识和Vue组件单元测试经验的开发者?...中的业务逻辑和异步action 他能够测试组件如何正确读取store中的state以及dispatch action 如何理解 Vuex 模式?...Vuex 等 Redux-like 架构在前端应用中的 “状态管理模式” ,已经将 View 视图层和 State 数据层尽可能合理得拆分与隔离,那么单元测试就只需要分别测试 Vue 和 Vuex,从而就能保证...未完待续…… ## 单元测试基础 ### 单元测试与自动化的意义 ### 为什么选择 Jest ### Jest 的基本用法 ### 该如何测试异步代码?...## Vue 单元测试 ### Vue 组件的渲染方式 ### Wrapper find() 方法与选择器 ### UI 组件交互行为的测试 ## Vuex 单元测试 ### CQRS 与 Redux-like

    1.6K30

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

    snapshot 测试,让UI测试简单有效 几乎 0 配置,自带各种功能。...Jest 的 snapshot 测试不仅可以对比React tree结构的区别, 也可以对比其他可序列化的值的区别。 比如对比Redux某个状态的state是否和之前相同。...selector层(redux和component之间)。...如果你的项目有难以测试的函数/组件, 应该先想着如何refactor,把庞大复杂的逻辑/组件拆分成功能单一的单元, 尽量让一个函数只做一个task。...如何来规划集成测试的 scope 也是根据项目不同来选择合适的方案的,有这样一层测试可以在不依赖于大量E2E测试的情况下保证各个组件之间也是正确工作的,是对测试效率和测试信心都有好处的一种这种方案。

    3.3K21

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

    在这篇文章中,我们将体验强大的 react-hooks-testing-library,学习如何去测试钩子的同步和异步逻辑,并最终通过一个完整的例子去了解如何结合 Redux 框架进行测试。...renderHook 函数,它的工作方式与我们之前创建的 testHook 函数类似。...提示 你也许还记得前面的课程中,我们讲到了如何用 Jest Mock 去避免发起真正的 HTTP 请求,从而能够保证测试不会因为网络问题而挂掉。...让我们先安装一下相关的依赖: npm install redux react-redux 三件套:Action、Reducer 和 Store 之前的模态框钩子 useModalManagement...如果你熟悉 Redux 的话,你应该记得 react-redux 提供了 Provider 组件来向所有子组件提供 Store 对象,但是在测试的时候,我们该怎么让 Provider 去包裹待测试的钩子呢

    2.1K00

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

    `Redux-like` 架构的好处 他能够合理测试vuex store的mutation和getter中的业务逻辑 他能够测试组件如何正确dispatch action以及action中如何做异步操作...### CQRS 与 `Redux-like` 架构 ### 如何对 Vuex 进行单元测试 ### Vue组件和Vuex store的交互 ## Vue应用测试策略 ### 单元测试的特点及其位置...最后,总结一下 Jest Jest 作为一个测试框架,其最大的特点就在于它是一个非常有效的解决方案,不需要与其他测试库交互来执行它的工作。...ps: 除此之外,还有很多开发者体验亦值得细细品味与发现,特别是 Jest 本身来自 Facebook 的工程化支持也是特别棒的,这个讲述如何开发 Jest 的官方视频值得一看:Building High-Quality...## CQRS 与 Redux-like 架构 ### 如何对 Vuex 进行单元测试 ### Vue组件和Vuex store的交互 ## Vue 应用测试策略 ### 单元测试的特点及其位置 ###

    89340

    聊一聊 2024 年 React 生态系统

    如果寻求性能卓越的静态内容框架,那么 Astro 是一个理想的选择。它不仅与各种框架兼容,而且能与 React 协同工作。...可以选择在组件内部使用 useState/useReducer Hook 进行协同定位,或者将它们与 useContext Hook 结合进行全局管理。...无论需要创建一个下拉菜单、选择框、单选按钮还是复选框,都应该学会如何独立地完成这些 UI 组件。 当然,如果你觉得创建所有组件的工作过于繁重,可以选择使用现成的 UI 库。...每次保存文件时,它会自动格式化代码,使代码更易于阅读和维护。 ESLint 和 Prettier 可以很好地协同工作。...这足以进行所谓的快照测试,这是通过 Jest 或 Vitest 进行的。快照测试的工作方式如下:一旦运行测试,会为 React 组件的渲染DOM元素创建快照。

    1.5K10

    2016 JavaScript 技术栈展望

    Flux 和 Redux 社区活跃且具有创造力,奉献了诸多优秀的开发工具 单向数据流比双向数据绑定的方式更适合复杂应用程序,质量更高 支持服务端渲染 虽然比起 Ember、Aurelia 和 Angular...一年之前对于上述工作,开发者还有诸多工具可以选择,比如基于 JavaScript 的 RequireJS、Browserify 和 Webpack 解决方案,此外还有号称能对 ES6 的模块进行最佳优化的...常见的测试工具有 Jasmine、Mocha、Tape、Ava、Jest 等,它们各有所长。...我对一个测试框架的要求有如下几条: 可以在浏览器运行,便于调试 执行速度快 便于处理异步测试 便于在命令行中使用 可以兼容任意断言和数据模拟的第三方库 第一条标准就排除了 Ava 和 Jest。...延伸 下面是一些我在 Twitter 上关注的对象: Dan Abramov, Redux 的创建者 Christopher Chedeau, 非常活跃的 React 开发者,现就职与 Facebook

    2.1K40

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

    作者简介 琨玮,携程高级前端开发工程师,从事React Native/Web前端的开发及维护工作,喜欢研究新技术。...一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest Jest是FaceBook出品的前端测试框架,适合用于React和React...有以下几个特点: 简单易用:易配置,自带断言库和mock库。 快照测试:能够创造一个当前组件的渲染快照,通过和上次保存的快照进行比较,如果两者不匹配说明测试失败。...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过和Jest相互配合可以提供完整的...('InteractionManager'); 六、Jest UI快照测试 Jest提供了snapshot快照功能用于UI测试,可以创建组件的渲染快照并将其与以前保存的快照进行比较,如果两者不匹配,则测试失败

    6.1K30

    大势 | 2018最值得关注的JavaScript趋势

    随着Vue与React之争的延续,预计会看到越来越多Next与React的双剑合璧,这会让React阵营的每个人都感觉舒服一点。...我们现在有了Relay Modern (Facebook开发)和Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...这是一个极其激励人的故事,展现出了开源工作应该如何演进,它的故事真的值得一读。 Storybook太有用了(而且用起来也很有趣),你可以单独地开放和测试UI。...他们网站的这张图可以让你了解到它大概是怎么工作的: Gatsby还利用先进的web技术替其他网页预抓取资源,使得浏览起来快如闪电。...无论如何现在都是JavaScript开发者的好时光,考虑现在你开发桌面和移动app已经比过去容易多了。

    80420

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

    单元测试:是指对软件中的最小可测试单元进行检查和验证,通常指的是独立测试单个函数。 UI 测试:是对图形交互界面的测试。 集成测试:就是测试应用中不同模块如何集成,如何一起工作,这和它的名字一致。...e2e,并与 src 同放在根目录下 VScode 和 WebStorm 都有对应的 Jest 插件,安装后书写代码时有代码补全,debug 和自动运行等功能 如何编写测试 其实,Jest 的语法蛮简单的...,之后调用函数,验证它的输出与期望的是否一样。...下面一起看一下如何处理这些情况。 LocalStorage 因为 Jest 的环境是基于 jsdom, 所以我们需要去模拟 localstorage 的行为。借鉴 Vue2.0 里数据侦测的方法。...在原有逻辑增加新功能时,通过运行之前的测试,能够大大提高迭代的质量和稳定性。 这篇文章主要总结了笔者在 React 项目中书写测试的经验与沉淀,而对于 Vue 的项目,暂时还没有深入研究。

    5.4K30
    领券