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

React-testing-library + Redux:在"Connect(Currency)“的上下文中找不到"store”

React-testing-library是一个用于测试React组件的工具库,它提供了一套简洁而强大的API,用于模拟用户与组件的交互并进行断言验证。Redux是一个用于管理应用状态的JavaScript库,它提供了可预测的状态容器,使得状态管理变得简单而可靠。

在React应用中使用Redux时,通常会通过react-redux库的connect函数将组件连接到Redux的状态树。在这个问题中,出现了一个错误提示:"Connect(Currency)"的上下文中找不到"store"。这个错误通常表示在测试过程中,没有正确地提供Redux的store给被连接的组件。

解决这个问题的方法是在测试代码中手动创建一个Redux的store,并将其传递给被测试组件的上下文中。可以使用redux-mock-store库来创建一个模拟的store,并使用Provider组件将被测试组件包裹起来,以便正确地提供store。

下面是一个示例代码,展示了如何在React-testing-library中测试一个使用Redux的组件:

代码语言:txt
复制
import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import Currency from './Currency';

const mockStore = configureStore([]);

describe('Currency component', () => {
  it('should render currency value from store', () => {
    const initialState = {
      currency: 'USD',
    };
    const store = mockStore(initialState);

    const { getByText } = render(
      <Provider store={store}>
        <Currency />
      </Provider>
    );

    expect(getByText('USD')).toBeInTheDocument();
  });
});

在上面的示例中,我们首先创建了一个模拟的store,并将初始状态传递给它。然后,我们使用Provider组件将被测试的Currency组件包裹起来,并将模拟的store作为store属性传递给Provider。最后,我们使用render函数获取渲染后的组件,并通过getByText函数来断言渲染结果中是否包含了'USD'文本。

这样,我们就可以在React-testing-library中正确地测试使用了Redux的组件,并且可以通过模拟的store来提供所需的上下文环境。

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

  • 腾讯云云服务器(CVM):提供灵活可扩展的云服务器实例,满足各种计算需求。产品介绍链接
  • 腾讯云云数据库MySQL版:高性能、可扩展的关系型数据库服务,适用于各种规模的应用。产品介绍链接
  • 腾讯云对象存储(COS):安全可靠的云端存储服务,适用于存储和处理各种类型的数据。产品介绍链接
  • 腾讯云人工智能:提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接
  • 腾讯云区块链服务(BCS):提供简单易用的区块链服务,帮助构建和管理区块链网络。产品介绍链接
  • 腾讯云视频处理:提供强大的视频处理服务,包括转码、截图、水印、封面生成等功能。产品介绍链接
  • 腾讯云音视频通信(TRTC):提供实时音视频通信能力,支持多人音视频通话和互动直播。产品介绍链接
  • 腾讯云云原生应用引擎(TKE):帮助用户快速构建、部署和管理云原生应用的容器服务。产品介绍链接

以上是腾讯云提供的一些与云计算相关的产品,可以根据具体需求选择合适的产品来支持开发和部署云计算应用。

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

相关·内容

【重学React】动手实现一个react-redux

每个需要与 redux 结合使用组件,我们都需要做以下几件事: 组件中获取 store状态 监听 store 中状态改变,状态改变时,刷新组件 组件卸载时,移除对状态变化监听。...文中所用到 Counter 代码 https://github.com/YvetteLau/Blog 中 myreact-redux/counter 中,建议先 clone 代码,当然啦,如果觉得本文不错的话...是作为 react-redux方法提供,因此我们不可能直接在 connect.js 中去导入 store,这个 store 应该由使用 react-redux 应用传入。...react 中数据传递有两种:通过属性 props 或者是通过上下文对象 context,通过 connect 包装组件应用中分布,而 context 设计目的是为了共享那些对于一个组件树而言是“全局...最后,使用我们自己编写 react-reduxredux 编写了 Todo demo,功能正常,代码 https://github.com/YvetteLau/Blog 中 myreact-redux

3.2K20
  • redux原理是什么

    使用redux之后,所有的状态都来自于storestate,并且store通过react-reduxProvider组件可以传递到Provider组件下所有组件,也就是说storestate...4.subscribe是为store订阅监听函数,这些订阅后监听函数是每一次dipatch发起后依次执行 5.可以添加中间件对提交dispatch进行重写3.reduxapi有哪些?...上下文中,context是react组件特有的一种不用手动一层层传递props就能在组件树中传递数据方式,这样就实现了store相对于react组件全局化,所有组件都能对store进行修改,获取,监听了...connect组件接受一个component组件返回一个新component组件,connect最终返回组件中获取store并将store设置为当前组件state,并且connect返回组件中...react-redux原理分析 connect实现import React, { Component } from 'react'import PropTyeps from 'prop-types'import

    64030

    redux原理分析

    使用redux之后,所有的状态都来自于storestate,并且store通过react-reduxProvider组件可以传递到Provider组件下所有组件,也就是说storestate...4.subscribe是为store订阅监听函数,这些订阅后监听函数是每一次dipatch发起后依次执行 5.可以添加中间件对提交dispatch进行重写3.reduxapi有哪些?...上下文中,context是react组件特有的一种不用手动一层层传递props就能在组件树中传递数据方式,这样就实现了store相对于react组件全局化,所有组件都能对store进行修改,获取,监听了...connect组件接受一个component组件返回一个新component组件,connect最终返回组件中获取store并将store设置为当前组件state,并且connect返回组件中...react-redux原理分析 connect实现import React, { Component } from 'react'import PropTyeps from 'prop-types'import

    75820

    React-Redux-实现原理

    React-Redux 基于两个核心概念:Provider 和 Connect。Provider 组件负责将 Redux 存储(Store)暴露给整个 React 应用。...Connect 则是高阶组件,用于连接 React 组件与 Redux Store。当一个组件通过 Connect 连接到 Store 时,它可以订阅 Store 状态,并在状态发生变化时获得通知。...在看了前面的 React-Redux 之后,这篇文章主要介绍就是内部实现过程,为了更好去了解 React-Redux 内部工作原理,首先新建一个 connect 目录,存放具体实现代码,经过观察我们之前使用...} }}export default connect;修改 Home.js 修改为我们自己实现 connect 然后查看效果图片经过如上一顿操作过后呢,已经实现了将 mapStateToProps...将之前从 store 当中获取代码改造为从我们全局上下文对象当中进行获取import React from 'react';import StoreContext from ".

    23720

    redux架构基础

    Redux并没有阻止一个应用拥有多个Store,只是,Redux框架下,让一个应用拥有多个Store不会带来任何好处,最后还不如使用一个Store更容易组织代码。...其中reduce接受两个参数,返回一个全新状态对象: const reducer=(preState,action)=>newState; 《从flux到redux》一文中,我们写了一个注册方法:...componentDidMount函数中,我们通过Storesubscribe监听其变化,只要Store状态发生变化,就会调用这个组件onChange方法;componentWillUnmount...终极解决方案:react-redux 首先是安装react-redux: npm i react-redux -S redux将实现两个重要功能: •connect:链接容器组件和傻瓜组件。...•Provider:提供包含storecontext connect connect相当于一个容器组件工厂。

    1.2K10

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

    引言 2020今天,构建一个 web 应用对于我们来说,并非什么难事。...在编写单元测试时候,一定会对之前代码反复进行调整,虽然过程比较痛苦,可组件质量,也一点一点提高。...更加符合我们对于单元测试原本诉求,以及最佳实践。 可遵循简单规则 也许上文中使用 React Testing Library 编写单元测试示例,还会给人一种一头雾水感觉。...TestRedux.js import React from 'react' import { connect } from 'react-redux' const TestRedux = ({counter...但是这一次,它只接收作为参数组件。为了创建新上下文,我们将CounterContext传递给 Provider。 现在,我们可以测试计数器最初是否等于0。那么,计数器增减是否正确呢?

    14.9K33

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

    UI 测试 UI 测试尽管有官方测试框架 ReactTestUtils 和 Test Render,但是它们 API 比较复杂,官方文档也是推荐使用 react-testing-library 或...Action 项目里使用了 redux-thunk 这个中间件,我们需要使用 redux-mock-store 来把中间件应用于模拟 store. // store/actions/cart.js...Redux 官方推荐直接测试 connect 包裹前组件。...import React from 'react'; import { connect } from 'react-redux'; import Immutable from 'immutable';...原有逻辑增加新功能时,通过运行之前测试,能够大大提高迭代质量和稳定性。 这篇文章主要总结了笔者 React 项目中书写测试经验与沉淀,而对于 Vue 项目,暂时还没有深入研究。

    5.3K30

    React 进阶 - React Redux

    单向数据流 整个 Redux ,数据流向都是单向 state 只读 Redux 中不能通过直接改变 state ,来让状态发生变化,如果想要改变 state ,那就必须触发一次 action...Store.dispatch 如果 connect 有第一个参数,那么会将 Redux state 中数据,映射到当前组件 props 中,子组件可以使用消费 当需要 state ,有变化时候,... ) } 整个应用中在想要获取数据组件里,获取 state 中内容 import { connect } from "react-redux" class Index...是通过 context 上下文来保存传递 Store ,但是上下文 value 保存除了 Store 还有 subscription subscription 可以理解为订阅器 React-redux...中一方面用来订阅来自 state 变化,另一方面通知对应组件更新 Provider 中订阅器 subscription 为根订阅器 Provider useEffect 中,进行真正绑定订阅功能

    91610

    React全家桶之Redux使用

    redux-devtools 创建 store实例,根组件比如 App.js中注册store,通过上下文(react-redux提供Provider)方式注入进去。...这需要react-redux提供另外一个函数:connect connect(state=>({ fruits:state.list, }))(原来函数组件) 原来函数组件,映射出来,自动带上了各种状态...重点思考,connect两个参数是什么含义? 组件中dispatch操作(add,init)会造成很大耦合。如果能结构到组件参数中,就好了。..., thunk)); 定义异步动作 // store // 把异步请求动作放到一个异步操作中。...首先,store文件夹下新建一个 fruitReducer.js,把无关store本身业务逻辑 // 把action和reducer移至fruit.redux.js // 导出异步操作 export

    1.3K20

    「源码解析」一文吃透react-redux源码(useMemo经典源码级案例)

    正式分析之前我们不妨来想几个问题: 1 为什么要在 root 根组件上使用 react-redux Provider 组件包裹?...3 provide 用什么方式存放当前 redux store, 又是怎么传递给每一个需要管理state组件?...多个 Provider 也可以嵌套使用,里层会覆盖外层数据。react-redux用context更倾向于Provider良好传递上下能力。...笔者认为react-redxx这样设计原因是希望connect自己控制自己更新,并且多个上下connect不收到影响。...,首先声明 store 更新订阅传播到此组件时回调函数checkForUpdates把它赋值给onStateChange,如果storestate发生改变,那么组件订阅了state内容之后,相关联

    2.3K40

    React 单元测试策略及落地

    “响应力”和“随时重构”这个上下文中来谈要不要单元测试,我们就可以很有根据了,而不是含糊不清地回答“看项目的具体情况”了。...对于这个策略,这里做一些其他补充: 关于不测 redux connect组件策略:理由是成本高于收益,得不偿失: 要配置依赖(配置 store、;如果是补测试还可能遇到 @...实际项目上副作用还有其他中间层进行处理,比如 redux-thunk、redux-promise 等,本质是一样,只不过 saga 测试性上要好一些。这一层副作用怎么测试呢?...(通常是通过 action 保存到 redux 中去) 主要业务逻辑(比如仅当用户满足某些权限时才调用 API 等分支逻辑) 异常逻辑(比如找不到用户等异常逻辑) 其他副作用是否发生(比如有时有需要...中取路径是错 redux 中已经被改过 第一、二种可能,如果是小步前进其实发现起来很快。

    1.1K20

    React 和 Redux 动态导入

    通过使用 React 来处理每个模块加载,我们可以应用程序任何时间延迟加载组件,这包括嵌套模块。 使用 Redux 到目前为止,我们已经演示了如何动态加载应用程序模块。...我们可以通过暴露每个模块 reducer 来扩展它。 还需要公开一个名称,该名称下我们模块状态将存在于应用程序store 中。...// my-module.js import * as React from 'react' import {connect} from 'react-redux' const mapStateToProps...但是我们需要先对我们 store 做更多工作。我们需要能够模块加载时注册模块 reducer。因此,当我们模块 dispatche 一个 action 时,我们 store 就会更新。...当 react-redux 组件将 store 添加到上下文中时,只需要使用 contextTypes LazyLoadModule 中获取它。

    2.1K00

    React进阶(6)-react-redux使用

    ,connect等),使用它可以更好组织和管理我们代码,遵循一定组件拆分规范,React中更方便使用Redux 关系: 它不是必须,实际项目中,可选用.是使用Redux还是使用react-redux...,通过mapDispatchToProps) react-redux帮我们做了监听,获取state等工作,同时它提供了两个好用API,Provider和connect,在下文中我们会学习到 安装react-redux...既然是一个第三方模块,那么可以通过npm或者yarn方式下载 npm install --save react-redux或yarn add react-redux 安装完成后,可以根目录package.json...,也是使用ProviderRouter外面包一层,因为Provider唯一功能就是传入store对象 如果不这样包裹着:内部组件时接收不到store状态数据,如下所示 <Provider...connect是react-redux库提供一个函数,用于连接UI组件,并且最终生成一个容器组件,提供了一些映射方法,mapStateToProps以及mapDispatchToProps UI

    2.2K00
    领券