首页
学习
活动
专区
工具
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和酶协同工作了。请注意,以上步骤中的一些细节可能因你的项目配置而有所不同,需要根据实际情况进行调整。

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

相关·内容

FEAFEM是如何协同工作

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

86530

图解DubboZooKeeper是如何协同工作

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

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

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

    58830

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

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

    7.4K20

    有关PrometheusThanos所有信息、差异以及它们如何协同工作

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

    42810

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

    前端应用越来越复杂,技术框架不断变化,如何成为一位优秀前端工程师,应对更大挑战?今天,阿里前端技术专家会影结合实际工作经验,沉淀了五项重要方法,希望能对你职业发展、团队协作有所启发。...过去一年,阿里巴巴新零售事业群支撑数据相关业务突飞猛进,其中两个核心平台级产品代码量急速增长,协同开发人员增加到数十人。...无论如何优化,始终要遵循 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层(reduxcomponent之间)。...如果你项目有难以测试函数/组件, 应该先想着如何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 storemutationgetter中业务逻辑 他能够测试组件如何正确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 应用测试策略 ### 单元测试特点及其位置 ###

    88840

    聊一聊 2024 年 React 生态系统

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

    1.2K10

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

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

    6.1K30

    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

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

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

    80220

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

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

    5.4K30
    领券