测试React组件方法和mapDispatchToProps
React组件方法是指在React组件中定义的函数，用于处理组件的行为和逻辑。常见的React组件方法包括生命周期方法和自定义方法。生命周期方法用于在组件的不同阶段执行相应的操作，如componentDidMount、componentDidUpdate等。自定义方法则是开发者自己定义的，用于处理具体的业务逻辑。
测试React组件方法的目的是确保组件的功能和行为符合预期。可以使用单元测试框架如Jest或Enzyme来编写和运行测试用例。测试React组件方法时，可以通过模拟组件的props、state和事件来模拟各种情况，包括正常情况、异常情况和边界情况。
mapDispatchToProps是React-Redux库中的一个函数，用于将Redux的dispatch方法转化为组件的props。它是一个对象或函数，用于定义将dispatch方法映射到组件props的规则。mapDispatchToProps的作用是让组件可以通过props来调用Redux的action，从而修改Redux的state。
测试mapDispatchToProps的方法与测试React组件方法类似，可以使用单元测试框架来编写和运行测试用例。可以模拟调用组件的props中的方法，并验证是否正确地调用了Redux的dispatch方法。
推荐的腾讯云相关产品：
- 云服务器CVM：腾讯云提供的高性能、可扩展的云服务器，可用于部署React组件和运行测试用例。产品介绍链接：https://cloud.tencent.com/product/cvm
- 云函数SCF：腾讯云的无服务器计算服务，可用于实现React组件中的自定义方法，并运行测试用例。产品介绍链接：https://cloud.tencent.com/product/scf
- 云数据库MySQL：腾讯云提供的关系型数据库服务，可用于存储React组件中的数据和测试结果。产品介绍链接：https://cloud.tencent.com/product/cdb
相关·内容
我想测试一下，当模拟按钮单击时，是否调用了从mapDispatchToProps传递的函数。
如何测试从mapDispatchToProps传入的函数是否被调用？
我试图通过props传递一个模拟的函数，但它不起作用。任何帮助都将不胜感激。
下面是我的伪类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
浏览 10提问于2018-08-29得票数 8
1回答
测试剩余连接组件
、、、、
我在React中有以下连接组件-Redux
export class IncrementalSearch extends React.Component {
constructor(props) {
super(props);
this.onSearch$ = new Subject();
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
this.subscription = this.onSearch$
浏览 2提问于2017-08-10得票数 0
1回答
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CommonActions from 'common/actions/common.actions';
import Activity from './activity.component';
const mapStateToProps = ({ common }) => ({common});
const mapDispatchToPr
浏览 2提问于2019-07-09得票数 1
1回答
单击处理程序模拟函数不被调用
、、、、
组件我想测试：
import React from 'react';
import { connect } from 'react-redux';
import { actionCreators as calculatorActionCreators } from './calculator';
class Pad extends React.Component {
handleClick = () => {
this.props.add(this.props.value);
};
render() {
ret
浏览 0提问于2018-06-11得票数 0
我读过和
以及这个概念：
components for “dumb” React components ;
containers for “smart” React components ;
但是他们没有提到mapDispatchToProps和mapDispatchToProps
这是否意味着我应该从容器中获取state和action，并且在组件中不使用mapDispatchToProps和mapDispatchToProps？
或者意味着我可以使用mapDispatchToProps，但不能在组件中使用mapDispatchToProps？
我对这个组件，容器概念感到困惑。
浏览 4提问于2016-08-24得票数 1
回答已采纳
// usage.
class Foo extends Component {
// component stuff
}
export default reduxify(actions, Foo);
reduxify函数(带注释)的要点是：
在没有注释的情况下(为了简短起见)，如下所示：
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getStore } from '../store/storeConfi
浏览 0提问于2016-05-11得票数 0
具有非常简单的组件：
从“prop- PropTypes”导入React从“react”导入{ connect }从“react-redux”导入react
class MyComponent extends React.Component {
componentWillMount() {
if (this.props.shouldDoSth) {
this.props.doSth()
}
}
render () {
return null
}
}
MyComponent.propTypes = {
doSth: PropTypes.
浏览 7提问于2018-06-22得票数 6
我试图升级以响应16+，而我现有的单元测试失败了。应用程序运行良好，只有单元测试失败。
连接-组成部分：
const componentsWrapper = (Components, selectData) => {
class BaseComponent extends Component {
constructor(props) {
super(props);
this.state = {
saveMode: false,
updateMode:
浏览 1提问于2020-01-16得票数 1
回答已采纳
当我使用react.js和react-redux创建一个项目时，我通常会创建一个独立于其他组件文件的操作文件，并使用connect函数将操作创建器导入到组件中，就像这样。 import { deletePost } from "../../actions";
connect(mapStateToProps, { deletePost })(aComponent); 但是在我发现mapDispatchToProps函数的存在后，直接从组件内部将操作分派给reducer会更方便。 const mapDispatchToProps = (dispatch) => {
浏览 14提问于2019-04-14得票数 0
回答已采纳
2回答
我想从子组件中的Redux获得道具。但{this.props}是空对象。我正在使用react-redux connect来获取道具。它在父组件中工作，我们可以传递给子组件以获得道具，但我需要从子组件中获取 登录 ```import React, { Component } from 'react' 从'./ Test‘导入{Test} 导出默认类登录扩展组件{ render() { return ( <div> <Test hi=""/> </div>
浏览 16提问于2020-01-30得票数 1
回答已采纳
使用create-react-app创建了一个简单的应用程序，然后更新了我的App.js并添加了redux/store。
class App extends Component {
render() {
return (
<header className="header">
<h1>todos</h1>
</header>
);
}
}
function mapStateToProps(state) {
return {
data: state.d
浏览 0提问于2018-03-19得票数 4
回答已采纳
我正在尝试了解React和Redux是如何工作的，我正在研究来自的FuelSavingsPage.js。我知道actions在mapDispatchToProps中是从哪里来的，但我不明白state是如何传递给mapStateToProps的，或者dispatch是如何传递给mapDispatchToProps的。这是怎么发生的？
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 're
浏览 8提问于2016-08-20得票数 5
回答已采纳
我正在使用react中的userProfile容器组件，它在服务器上显示一些数据。
这是构成部分：
import React from 'react';
import {connect} from 'react-redux';
import PersonalInformationView from './PersonalInformationView';
import * as selectors from '../../../reducers';
class PersonalInformationViewContain
浏览 4提问于2017-11-01得票数 1
回答已采纳
我想测试父组件，但我想在没有redux的情况下这样做。我有问题是因为我有错误：
不变冲突:在“连接(MarkerList)”的上下文或属性中找不到“存储”。或者将根组件包装在中，或者显式地将“存储”作为道具传递给“连接(MarkerList)”。
我的父组件：
export class Panel extends React.Component {
constructor(props) {
}
componentDidUpdate(prevProps) {
...
}
handleCheckBox = event => {
...
};
s
浏览 1提问于2020-04-20得票数 0
我有一个连接到存储的组件。我必须在react组件内部测试一个函数。我怎样才能达到这个功能呢？
例如：
var newReactComponent = React.createClass({
functionToBeTested: function(){
this.props.actions.fetchAll();
}
});
var mapStateToProps = function (state) {
return {
cars: state.carReducer.cars
}
};
浏览 1提问于2016-04-13得票数 1
2回答
我有这样一个连接的容器：
import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { autobind } from 'core-decorators';
const propTypes = {
data: PropTypes.object,
userData
浏览 1提问于2018-01-20得票数 3
回答已采纳
我有一个React类，它在react-redux的Provider中呈现。
<Provider store={store}>
<First/>
</Provider>
因此，我可以很容易地在react-redux的mapDispatchToProps和mapStateToProps中使用First。
但是在First中，我呈现的另一个组件如下所示：
ReactDOM.render(
React.createElement(Second),
document.getElementById('preview-right&#
浏览 1提问于2017-01-07得票数 1
我必须测试以下组件：
import React from 'react';
import { connect } from 'react-redux';
import { open as openModal } from 'redux/actions/ModalActions';
import { MODAL_CONTENT_ADD_TO_ALBUM } from 'constants/ModalNameConstants';
import ContentAddToAlbumModal from 'components
浏览 2提问于2021-10-11得票数 0
在学习React Redux时，我偶然发现了下面的代码，其中我不确定下面两行与使用mapDispatchToProps的区别是什么？
let { dispatch, actions } = this.props;
dispatch(actions.createTodo({ todo }));
有人能告诉我使用这两行和使用mapDispatchToProps的区别吗？另外，上述两行是否可以用于组件、容器或仅用于组件？谢谢
import React from 'react';
import ReactDOM from 'react-dom';
ex
浏览 2提问于2017-07-02得票数 6
回答已采纳
如果是复制的话请原谅。
我刚刚通过了一些很好的Open source React+Redux projects，我通过了这个，在这个中，他们试图直接从存储中获取几乎每个组件中的数据。
例子-
const Inner = ({
isInsertMode,
insertMode
}: {
isInsertMode: boolean,
insertMode: Function
}) => (
<Button
icon={<ContentAdd />}
description="Add things"
active={
浏览 6提问于2017-05-30得票数 2
回答已采纳
我已经学习了几天的React/Redux。在普通英语和基础英语中，mapDispatchToProps是什么？
我有一个我不明白的功能。
function mapDispatchToProps(dispatch) {
return bindActionCreators({ selectBook: selectBook}, dispatch);
}
浏览 7提问于2017-11-02得票数 3
回答已采纳
1回答
在测试React components时，有一个常见的问题，该组件连接到酶中的Redux。您可能遇到了以下错误：
Invariant Violation: Could not find "store" in either the context or props of "Connect(YourComponent)
通过两次导出测试中的组件，解析了：
export class YourComponent extends Component {}
export default connect(mapStateToProps, mapDispatchToProps)(You
浏览 1提问于2018-10-04得票数 3
我们一直在使用react、react router和redux。现在我们想要添加injectIntl。我的语法有点问题，希望你能帮我。
import React, { Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { intlShape, injectIntl } from 'react-intl';
...
export default
浏览 114提问于2018-06-06得票数 0
3回答
我正在使用Enzyme对我的反应组件进行单元测试。我理解，为了测试未连接的原始组件，我只需导出并测试它(我已经这样做了)。我已经成功地为连接的组件编写了一个测试，但是我真的不确定这是否是正确的方法，也不确定我到底想为连接的组件测试什么。
Container.jsx
import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';
const mapStateToProps =
浏览 0提问于2016-08-17得票数 24
回答已采纳
阅读了很多关于这方面的文章和博文，我明白了(简化版)
mapDispatchToProps()(
clickHandler: ()=>dispatch(Action)
);
<Component onClick={this.props.clickHandler} />
的作用与
<Component onClick={store.dispatch(action)} />
这看起来比使用mapDispatchtoProps的麻烦更简单
一般情况下，我对redux和react是个新手，不能完全理解这一点。是否真的有必要使用它，或者这只是一个很好的编码实践？
浏览 0提问于2018-11-01得票数 2
假设我们有传统的React /Redux方法：(如果您熟悉该代码，则不需要展开它：)
import React from 'react';
import { connect } from 'react-redux';
function Count(props) {
return (
<div>
<button onClick={props.increment}> + </button>
{props.count}
<button onClick={props.decr
浏览 1提问于2020-04-21得票数 7
2回答
我用的是React和Redux。我有一个加载ChildComponent的组件，取决于Redux的状态也将加载MainComponent
const ChooseIndex = ({ appInitMount }) => {
return (
<>
<ChildComponent />
{!appInitMount && <MainComponent />}
</>
);
};
const mapSta
浏览 0提问于2018-10-25得票数 5
回答已采纳
1回答
组件中的state有问题。我正试图从我的减速器那里得到状态，但是state是空的，只要得到undefined
这是我的actionCreator
export function checkLogin() {
return function(dispatch){
return sessionApi.authCheck().then(response => {
dispatch(authSuccess(true));
}).catch(error => {
throw(error)
})
}
}
我的减速器
export c
浏览 1提问于2017-02-12得票数 1
回答已采纳
2回答
我是ES6和Redux的新手。我正在看一些代码，并试图理解这个新的ES6语法中发生了什么。
我觉得这可能很简单，但我不理解它，它可能会帮助其他与我处于类似地位的人。
我想知道下面的代码是如何创建react元素的。我熟悉React.createClass方法，但似乎没有在这里说明，或者至少没有明确说明。我可以看到React是导入的，但在其余的代码中没有提到它。那么如何将FileTable转换为react组件呢？
这方面的任何帮助都是非常感谢的。
import React, { PropTypes } from 'react';
import { connect } from &
浏览 1提问于2016-08-02得票数 0
在redux站点中，我遇到了一种重复的模式:组件显示来自web的数据，它应该在加载时自动填充，不需要任何用户交互。
--我想从容器组件中启动异步获取，但据我所知，唯一的方法是从显示组件中的生命周期事件中提取它。似乎使得不可能将所有的逻辑放在容器中，并且只使用哑的无状态函数组件来显示。
这意味着我不能对任何需要异步数据的组件使用无状态函数组件。这似乎不对。
这样做的“正确”方式似乎是以某种方式从容器启动异步调用。然后，当调用返回时，状态将被更新，容器将获得新的状态，然后将这些状态通过mapStateToProps()传递给其无状态组件。
在mapStateToProps和mapDispatchT
浏览 3提问于2016-07-20得票数 30
回答已采纳
我在用Jest /酶编写的测试用例中遇到了一些问题。我有一个React / Redux组件，并且试图编写一个基本的测试，但是得到了以下错误：
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'undefined'.
这是我的密码：
dashboardComponent.js
import '../stylesheets/dashboardCom
浏览 0提问于2018-08-31得票数 6
回答已采纳
由于某种原因，我的React组件显示以下错误：
Warning: ReactComponent(...): No `render` method found on the returned component instance: you may have forgotten to define 'render'.
尽管我已经在我的组件中定义了render：
import React, { Component } from 'react';
import {addCart} from './Shop';
import { connect } fr
浏览 2提问于2017-07-09得票数 0
回答已采纳
不变冲突:在"Connect(App)“的上下文或属性中都找不到"store”。或者将根组件包装在中，或者显式地将"store“作为道具传递给"Connect(App)”。
我讨厌问一个已经被问了很多次的问题的变体，但我已经尝试了所有提出的解决方案，但都没有成功。
index.js
import React, {Component} from 'react'
import {AppRegistry} from 'react-native'
import {Provider} from 'react-redux'
i
浏览 0提问于2018-09-04得票数 3
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
2回答
我使用react-native和redux和redux-thunk。基本上，我有一个连接到store的Component，它用dispatch修改其中的一些信息。尽管每个操作似乎都是同步的，但我在修改后的下一行上获得了旧数据。
//reducer
import {assign as _assign} from 'lodash-es';
let initialState = {name: '1'};
export default (state = initialState, action) => {
switch (action.type) {
浏览 0提问于2017-09-26得票数 1
我刚刚加入了一个团队，我们使用react，redux，recompose来构造组件来构建UI。应用程序中没有任何单元测试，并且应用程序没有一致的体系结构。我决定自己使用jest和react- tests library添加单元测试。我在一些快照测试中取得了成功，但在单元测试方面却举步维艰。我还在学习react，并且对redux还很陌生。我想要一些建议。我将分享一个组件，它呈现一个带有列和行的表。我想要一个反馈。 import React, { useEffect, useState } from 'react';
import { compose } from 're
浏览 32提问于2020-01-29得票数 2
回答已采纳
1回答
用反应原生Auth
、、、、
我刚刚开始将Redux集成到我的第一个Reactive原住民(Expo.io)项目中。我已经在Redux中获得了很好的登录效果，但是当我尝试在我的应用程序的一个屏幕上创建一个注销按钮时，它实际上会在加载它时触发注销调度。我想我一定是误解了Redux和mapDispatchToProps的工作方式。我已经读了很多次文档，但仍然被卡住了。这是处于非工作状态的代码。
登录-直到我在配置文件页面中添加注销调度
import { connect } from "react-redux";
import React, { Component } from "react"
浏览 0提问于2017-06-26得票数 0
回答已采纳
所以，这里有一个奇怪的例子。在另一个组件中呈现的React functional component(FC)。导入的FC是类型错误的FC，但具有所有正确的接口。
我已经搜索了所有与此相关的其他帖子，但没有一个适合我的用例。他们谈到了在这种情况下接口中的可选组件，但我不会使用这个。另外，我在同一个类中渲染其他FCs，他们没有得到这个错误。我要发疯了！请帮帮我！
React 17.0.2
@types/react 17.0.6
导入的组件(有错误)
...
<CreditCardDialog
title={'Some String'}
subTitle={`Som
浏览 5提问于2021-11-04得票数 0
如果我只需要更改mapDispatchToProps和mapStateToProps，而不需要更改表示组件，那么是否需要临时使用？例如：
export class SomeContainer extends Component {...}
const mapStateToProps = state => {
//IMPORT HERE STATE
};
const mapDispatchToProps = (dispatch, ownProps) => ({
...someFn,
//IMPORT HERE OTHER DISPATCH FN
});
并通过更改connect
浏览 2提问于2017-06-09得票数 0
回答已采纳
新的测试，这是一个连接组件使用redux。我正在测试是否调用了maskPromoCode函数。对于当前的测试代码，错误是:不能对原语值进行spyOn；未定义给定
不明白为什么。谢谢。
构成部分：
class Textbox extends React.Component {
constructor(props) {
super(props);
}
onChange(e) {
e.preventDefault();
this.setState({
value: this.maskPromoCode(e.target.value)
})
浏览 2提问于2022-01-21得票数 1
回答已采纳
1回答
我对智能/哑巴组件等非常熟悉。
通过mapStateToProps和mapDispatchToProps使用react-redux与redux连接的LoginContainer。
然后我有一个LoginComponent，它有UI之类的东西。
所以问题是，当用户单击"LoginComponent“中的登录按钮时，它必须调用那里的函数。所以我猜方法是从LoginContainer传递函数，然后在LoginComponent中单击按钮时调用它？
但在这种情况下，这是否意味着在进行单元测试时，我必须在哑巴组件LoginComponent中模拟此按钮函数调用的功能？
浏览 1提问于2016-10-24得票数 0
? 我是nodejs和reactjs的初学者，我正在开发一个简单的应用程序。我现在在前面的部分，我安装了所有必要的包和模块。我启动了我的前面部分，但这里没有显示任何内容，这是所获得的结果的屏幕截图。提前谢谢你 下面是我的reactjs代码的一部分 import React from 'react';
import {connect} from 'react-redux';
import {fetchVideos} from '../actions/videoActions';
var listVideos
class videos ext
浏览 29提问于2019-04-05得票数 0
我有index.js文件，其中包含：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'
import * as serviceWorker from './serviceWorker';
import {combineReducers,createStore,compose,applyMiddleware} from 'redux'
浏览 1提问于2020-05-14得票数 0
回答已采纳
1回答
我得到了连接组件和未连接组件之间的区别，但是以这种方式分离所有组件的效用是什么呢？所有连接的组件都依赖于不连接，反之亦然，所以我不明白为什么会存在这种模式。
连接构件
import { connect } from 'react-redux';
import PrivacyPolicyUI from './PrivacyPolicyUI';
const mapStateToProps = (state) => {
return { };
};
const mapDispatchToProps = (dispatch) => {
浏览 3提问于2017-11-29得票数 0
回答已采纳
如何从history中访问mapDispatchToProps支柱
import { withRouter } from "react-router-native";
const mapDispatchToProps = (dispatch, ownProps) => ({
doSomething: () => ownProps.history.goBack() // history is undefined ...??
})
export default withRouter(connect(undefined, mapDispatchToProps)
浏览 1提问于2018-12-07得票数 0
1回答
我有这样的组件。它是另一个组件的包装器组件。有一个onClick函数，如果是鼠标事件，应该调用日志
import log from './log';
export function withPressedLog(
Component,
options,
) {
class WithPressedLogComponent extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onCli
浏览 0提问于2018-06-19得票数 3
请帮帮忙。
this.props.store不适用于子组件。
但是连接(mapStateToProps，mapDispatchToProps) .效果很好。
为什么不能使用独生子女组件？
1.父代码(运行良好)
import React from 'react';
import ReactDOM from 'react-dom';
import { Home } from './container/home/index';
import { ChildrenComponent } from './container/childrenCom
浏览 4提问于2017-01-26得票数 0
2回答
我有一个助手函数，它被我的React中的两个组件所使用。这个助手函数分发一组Redux操作。如何将连接到此助手函数，以便它能够分派操作？
我的助手看起来是这样的：
export default const helper = () => {
//dispatch some actions
// I would like to do something similar to this: this.props.dispatch()
//do something else(produce some JSX)
}
我的组件看起来如下：
import helper from &
浏览 0提问于2018-12-06得票数 1
回答已采纳
2回答
我得到了一个错误-：
不变违规:无法在上下文或“Connect(登录)”的道具中找到“存储”。将根组件包装在一个，或显式传递“存储”作为“连接(登录)”的支柱。
我的Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './fonts/stylesheet.css';
import './index.css';
import Routes from "./routes";
import registerServic
浏览 0提问于2018-03-27得票数 2
回答已采纳
1回答
我正在使用新的库作为我正在构建的React本机应用程序。我有一个问题，把我的ActionCreators从我的Nav组件下到它的场景。
我有一个包装整个应用程序的AppContainer。
import React, { Component } from 'react';
import { DrawerNavigator, addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import { bindActionCreator
浏览 0提问于2017-03-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
