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

用酶和jest测试Redux连接组件

酶(Enzyme)是一个用于React组件测试的JavaScript测试工具。它提供了一组简单而强大的API,用于模拟React组件的渲染、交互和断言。Jest是一个基于JavaScript的测试框架,用于编写和运行快速、可靠的测试。

Redux是一个用于JavaScript应用程序的可预测状态容器。它通过将应用程序的状态存储在一个单一的JavaScript对象中,使得状态管理变得简单而可控。Redux连接组件是指将React组件与Redux状态进行连接,以便组件可以访问和操作Redux存储的状态。

使用酶和Jest测试Redux连接组件的过程如下:

  1. 安装必要的依赖:
    • 酶:npm install enzyme enzyme-adapter-react-16 enzyme-to-json --save-dev
    • Jest:npm install jest --save-dev
  • 创建一个测试文件,例如MyComponent.test.js
  • 导入所需的依赖:
  • 导入所需的依赖:
  • 创建一个模拟的Redux存储,并将其传递给组件:
  • 创建一个模拟的Redux存储,并将其传递给组件:
  • 编写测试用例:
  • 编写测试用例:
  • 在第一个测试用例中,我们使用shallow方法来渲染组件,并使用toMatchSnapshot断言来验证渲染结果是否与预期一致。
  • 在第二个测试用例中,我们模拟了一个按钮点击事件,并使用getActions方法来获取Redux存储中的所有动作,然后使用toEqual断言来验证动作是否与预期一致。
  • 运行测试: 在命令行中运行npm test命令,Jest将自动运行测试文件并输出结果。

这样,我们就可以使用酶和Jest来测试Redux连接组件了。

推荐的腾讯云相关产品:

  • 云服务器(CVM):提供可扩展的计算能力,用于部署和运行应用程序。详情请参考:腾讯云云服务器
  • 云数据库MySQL版(CDB):提供高性能、可扩展的关系型数据库服务。详情请参考:腾讯云云数据库MySQL版
  • 云存储(COS):提供安全、可靠、低成本的对象存储服务,用于存储和访问任意类型的文件和数据。详情请参考:腾讯云云存储
  • 人工智能平台(AI Lab):提供丰富的人工智能算法和模型,帮助开发者构建智能化应用。详情请参考:腾讯云人工智能平台

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

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

相关·内容

JavaScript 测试系列实战(一):使用 Jest Enzyme 测试 React 组件

本篇教程是 JavaScript 测试系列实战 的第一篇教程,首先介绍了测试的类型,然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试,然后使用 Enzyme 对 React 组件进行浅层渲染...接着,我们又编写了一个包含多个例的测试文件,并通过 describe 函数将测试用例组织得井井有条。...初识 Enzyme:编写第一个 React 组件测试 很显然,我们不会仅仅满足于测试像 divide 那样简单的函数,我们希望能够测试一个 React 组件,但是一个普通的 JavaScript...)).toEqual(true); }); }); 可以看到,这里我们 shallow 函数来浅层渲染 App 组件得到 app ,并且调用其 containsMatchingElement...小结 在过去的两个小节中,我们了解、安装配置了 Enzyme,并且接触了 shallow 浅层渲染这个单元测试利器,并且循序渐进测试了两个 React 组件

3K10

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

测试- - Jest + Enzyme Jest是Facebook的一个测试库,旨在让测试过程无痛苦。与Facebook项目一样,它提供了一种开箱即用的良好开发体验。...Jest可以保存React组件Redux状态生成的输出,并将其保存为序列化文件,这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...React附带了一些测试工具,但是通过类似于jquery的API,通过Airbnb提供的可以更容易地生成、断言、操作和遍历React组件的输出。建议测定反应组分。...Jest使编写前端测试变得有趣容易。因为定义了明确的职责接口,所以React组件Redux操作/缩减器相对容易测试也很有帮助。...对于React组件,我们可以测试给定一些道具,呈现所需的DOM,并在某些模拟用户交互时触发回调。对于Redux还原器,我们可以测试给定的一个先验状态一个动作,会产生一个结果状态。

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

    Jest 的 snapshot 测试不仅可以对比React tree结构的区别, 也可以对比其他可序列化的值的区别。 比如对比Redux某个状态的state是否之前相同。...实际应用时,我们用了 jest 的 shallow 方法来生成测试组件的wrapper; enzyme-to-json/serializer 这个 lib 把生成的 shallowWrapper 转化成... shallow 的好处是保证每个组件测试的独立性,比如在当前组件的 snapshot 结构树中, 我只关心我用到的 childComponent 的名字传给他什么 prop, 具体这个组件的内部UI...通常的 WWW API 测试的方法几乎相同。 Jest实现的好处是保持所有的单元测试用统一的 framework 实现运行, 用起来比较方便。...这块测试因为需要真正的连接到 server 上, 因此可以其他的单元测试分开以提高运行的速度。

    3.3K21

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

    在较大规模的前端项目中,测试对于保证代码质量十分重要,而React的组件函数式编程, 这种相同输入一定返回相同输出的幂等特性特别适合单元测试。...有以下几个特点: 简单易用:易配置,自带断言库mock库。 快照测试:能够创造一个当前组件的渲染快照,通过上次保存的快照进行比较,如果两者不匹配说明测试失败。...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过Jest相互配合可以提供完整的..."redux-mock-store": "^1.5.3" //Redux测试模拟store } 根目录下添加jest.config.js文件作为配置文件: module.exports..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态的管理,需要mock store

    6.1K30

    2021年React学习路线图

    本文列出重要的 React 概念其他你需要知道的有用的库,你可以学到怎么 React 创建真实应用。 1....你应该学习: Redux 搭建一个项目 Redux 做数据获取状态管理 可选的,看一下 Redux Thunk 一开始我很难理解 Redux。...3.2 测试 Jest - 简单的 JavaScript 测试框架。 Jest 是一个简单的 JavaScript 测试框架,它注重简单性。...编写测试很重要,根据我的经验,通常比编写实际代码更难。 您应该学习最流行的测试库,如 Jest Enzyme,以及如何使用库(如 Sinon )模拟 API 调用。...3.5 小结 Redux/Redux Thunk 测试 React 组件 React 高级概念 自己搭建一个 React 项目 React 源码 3.6 资源推荐 Redux 初学者教程 https:/

    7.6K21

    年轻时,我不写单元测试

    重点将展开以下两种react组件类型测试。 展示型组件测试 展示型组件测试,意思就是要确保每一次的修改都是符合预期的,这里笔者要着重介绍下jest框架里面的snapshot功能。...shapshot就是会对组件进行一次快照记录当前的状态,每一次run jest的时候,对比上一次,看看是否有变化。...但是仔细想想,这其实就违背了我们单元测试的初衷,笔者这里也大胆猜测下,jest官方在实现这个功能的时候,应该也只是想记录下一步一步的事件后,当前组件的html结构,对比上一次的快照,来看功能是否符合预期...一开始我觉得单元测试很鸡肋的原因也是没有深入了解它,这次发现就算是业务结合很紧密的组件,也能够模拟正常的操作,这里就贴一个redux结合的组件来举例 import React from 'react...那其实整个流程就是初始化这个组件,看看渲染的html结构是否符合预期,然后点击下拉框,选中其中第一个,发起请求,拉回详细数据,再观察组件是否展示正常,编写完测试用例后,就已经代码模拟了整个手工操作,怎么样

    86920

    React + Redux Testing Library 单元测试

    image.png Redux 背后的基本思想 所以说, Redux 就是把组件的共享状态 “state” 抽取出来,以一个全局 “store” 的单例模式统一管理。...如何对 Redux 进行单元测试 得益于 Redux 能够将 React 应用的共享状态进行隔离,我们的代码也因此变得更加结构化且易于维护,Redux 中的 reducer、action selector...Redux store 的交互 前面我们讲完了 Redux 单元测试所需要的基本知识,而 React 组件需要从 Redux store 读取状态或者是发送 action 改变 store 状态的时候...接下来就来聊聊如何用 React Test Utils 测试 React 组件中的 Redux。...,其实我们在测试 React 组件(单元)的时候不需要关心 Redux store 长什么样子,我们只需要知道 Redux store 当中的这些 action 将会在适当的时机触发,以及它们触发时的预期行为是什么

    2.4K10

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

    在这篇文章中,我们将体验强大的 react-hooks-testing-library,学习如何去测试钩子的同步异步逻辑,并最终通过一个完整的例子去了解如何结合 Redux 框架进行测试。...它提供了一系列专门用于测试 Hook 的工具函数,能够模拟在真实组件中使用 Hooks。...注意 在编写 Jest 异步测试用例时,如果涉及到 Promise 的使用(包括 async/await ),要确保 return 一个值,否则测试会超时。详细介绍请参考 Jest 异步测试文档。...至于怎么 Mock 来写,就留给作业给你吧~ 测试 Redux + Hooks 在规模较大的应用中,我们通常会使用一个状态管理库来解决复杂的数据流问题,而最受欢迎的选择无疑是 Redux。...如果你熟悉 Redux 的话,你应该记得 react-redux 提供了 Provider 组件来向所有子组件提供 Store 对象,但是在测试的时候,我们该怎么让 Provider 去包裹待测试的钩子呢

    2.1K00

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

    实际上,第一个并不关心按钮是否正确地连接到方法。它只查看实现本身,也就是说,您的递增递减方法执行之后,应用的状态是否正确。这就是代码损坏,测试也会通过。...它只是一个由 React Redux 处理的基本计数器组件。 现在,让我们来编写单元测试。...这里,我们创建了自己的助手函数 renderWithRedux() 来呈现组件,因为它将被多次使用。 renderWithRedux() 作为参数接收要呈现的组件、初始状态存储。...测试当我们点击链接时,它是否参数导航到其他页面: 现在,要检查导航是否工作,我们必须触发导航链接上的单击事件。...结语 React Testing Library 是用于测试 React 应用的一大利器。它为我们提供了访问 jest-dom 匹配器的机会,以及最佳实践,使得我们可以使用它来更有效地测试我们的组件

    14.9K33

    2022 年的 React 生态

    它允许你管理应用程序的全局状态,任何连接到其全局存储的 React 组件都可以读取修改这些状态。 如果你碰巧在用 Redux,你一定也应该查看 Redux Toolkit。...建议: useState/useReducer 处理共享状态 选择性使用 useContext 管理某些全局状态 Redux(或另一种选择) 管理全局状态 链接: Redux:https://redux.js.org...你可以使用 react-test-renderer 在你的 Jest 测试中渲染 React 组件。...这已经足以使用 Jest 执行所谓的 Snapshot Tests 了:一旦运行测试,就会创建 React 组件中渲染的 DOM 元素的快照。...当你在某个时间点再次运行测试时,将创建另一个快照,这个快照会前一个快照进行 diff。如果存在差异,Jest 将发出警告,你要么接受这个快照,要么更改一下组件的实现。

    5.8K20

    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 等 Redux-like 架构在前端应用中的 “状态管理模式” ,已经将 View 视图层 State 数据层尽可能合理得拆分与隔离,那么单元测试就只需要分别测试 Vue Vuex,从而就能保证...## Vue 单元测试 ### Vue 组件的渲染方式 ### Wrapper find() 方法与选择器 ### UI 组件交互行为的测试 ## Vuex 单元测试 ### CQRS 与 Redux-like

    1.6K30

    前端食堂技术周刊第 34 期:Node.js v18 、Nuxt 3 RC1、Parcel v2.5.0、计算机程序的构造和解释

    “一次编写组件,到处运行”,意味着我们可以用它来创造一个跨多个框架的 UI 组件库,以更高的抽象级别编写组件,实现在不同框架之间的轻松迁移。...为什么要使用 Redux Toolkit[9] Redux 官方发布的这篇博客讲解了 Redux Toolkit 的 Why How,并强烈推荐使用。...Jest 基础知识 使用 Enzyme 测试 React 组件 组件 Props 测试、mount 函数渲染、快照测试 Mock 模拟 API 调用、模拟 React 组件交互 使用 react-hooks-testing-library...测试 Hooks 使用 Cypress 进行端到端测试(E2E) 对比 React Testing Library Enzyme 使用 Jest React Testing Library 的...Toolkit: https://redux.js.org/introduction/why-rtk-is-redux-today [10] JavaScript 测试教程: https://wanago.io

    1.1K20

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

    在 Vue 应用的单元测试中,对 UI 组件 vuex store 等测试的区别有何不同?颗粒度该细到什么程度?...阅读练习本文的Jest的部分 // Then 他能够把Given/When/Then的套路学会 他能够学会Jest的基本用法,包括测试suite断言等语法 他能够学会Jest测试异步的几种方式 2...`Redux-like` 架构的好处 他能够合理测试vuex store的mutationgetter中的业务逻辑 他能够测试组件如何正确dispatch action以及action中如何做异步操作...### CQRS 与 `Redux-like` 架构 ### 如何对 Vuex 进行单元测试 ### Vue组件Vuex store的交互 ## Vue应用测试策略 ### 单元测试的特点及其位置...## CQRS 与 Redux-like 架构 ### 如何对 Vuex 进行单元测试 ### Vue组件Vuex store的交互 ## Vue 应用测试策略 ### 单元测试的特点及其位置 ###

    88840

    web前端好帮手 - Jest单元测试工具

    合理的describe()分组按功能细分test()测试对日后维护起到很关键的作用。 断言库常用接口 Jest内置Expect断言库,下面列举几个常用的断言方法就足以应付正常测试场景。...Jest支持callbackPromise两种场景的异步测试。...注意,如果redux状态组件测试时,要先初始化store触发redux的事件后,再渲染React组件: test("init", () => { let store = initStore(combineReducers...collectCoverage: true, }; 开启测试覆盖后,我们执行Jest测试完成就会在项目根目录生成一个coverage目录,浏览器打开其中的index.html文件查看测试覆盖报告。...当然如果Webstorm调试Jest就无需担心这种并发的情况,WebStorm默认走单进程执行Jest

    5K40

    React 单元测试策略及落地

    选用断言工具时,应注意除了要提供测试结果,还要能准确提供“期望值”与“实际值”的差异 上述第三点有些反例,比如说chaisinon提供的断言API就不如jest友好,体现在: expect(array.../react-testing-library component 测试 组件测试其实是实践最多、测试实践看法分歧也最多的地方。...组件分支渲染逻辑必须测 事件调用参数传递一般要测 连接 redux 的高阶组件不测 渲染出来的 UI 不在单元测试层级测 组件的分支逻辑,往往也是有业务含义业务价值的分支,添加单元测试既能保障重构,...考虑到这些成本,我不推荐在单元测试的级别来做 UI 类型的测试。对于我们之前中等规模的项目,诉诸手工还是有一定的可控性。 连接 redux 的高阶组件不测。...参数化测试可以提升数据准备效率,同时依然能保持详细的例信息、错误提示等优点。

    1.1K20

    React 16 - 生态:UI 库、Next.js、测试、开发调试工具

    # UI 库 # Ant.Design 组件齐全,适合企业场景 # Material UI 样式更加美观,适合 2C 场景 # 选择因素 组件库是否齐全 样式风格是否符合企业业务需求 API 设计是否便捷灵活...组件 页面会针对性打包,仅包含其引入的组件 使用 Link 实现同构路由 使用 next/link 定义链接 点击链接时页面不会刷新 使用 prefetch 预加载目标资源 使用 replace 属性替换路由...React 让前端单元测试变得容易 React 应用很少需要访问浏览器 API 虚拟 DOM 可以在 Node.js 环境运行测试 Redux 隔离了状态管理,可以进行纯数据层单元测试 # 相关工具...Jest:单元测试框架 JS DOM:浏览器环境的 Node.js 模拟 Enzyme:React 组件渲染测试 nock:模拟 HTTP 请求 sinon:函数模拟调用跟踪 istanbul:单元测试覆盖率...# 开发调试工具 ESLint Prettier React DevTool Redux DevTool

    1.5K30
    领券