JestJS->不变违规:无法找到“存储"在"Connect(Portfolio)"的上下文中或在其道具中的意思是: [英] JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"
问题描述
完整的错误消息:
不变违反:在"Connect(Portfolio)"的上下文或道具中找不到"store".将根组件包装在中,或者将存储"作为道具明确传递给"Connect(Portfolio)".
Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Portfolio)".
不确定我的应用程序正在运行时为什么在Jest测试中会出现此错误,并且可以通过调度操作更改状态.
Not sure why I'm getting this error in my Jest tests as my app is working and I can change my state with dispatch actions.
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
import App from './App'
const element = document.getElementById('coinhover');
const store = createStore(reducer, compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>, element);
投资组合组件
import React from 'react'
import { connect } from 'react-redux'
import SocialMediaFooter from '../common/SocialMediaFooter'
import AssetsTable from '../assetsTable/AssetsTable'
import local_coins from '../../coins.json'
import * as api from '../../services/api'
const mapStateToProps = ({ portfolio }) => ({
portfolio
});
let localCoins = local_coins;
class Portfolio extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
assets: props.portfolio,
total: 0
};
}
componentDidMount() {
this.setState({ loading: false });
}
render() {
const assets = this.state.assets;
const total = this.state.total;
return (
<div className="app-bg">
<section className="portfolio">
<header>
<h1><span className="plus">+</span>COINHOVER</h1>
<h2>Watch your cryptocurrency asset balances in once place.</h2>
<em className="num">${ total }</em>
</header>
{ this.state.loading ? (
<div className="loading">
<div className="loader"></div>
<span>Loading coin data...</span>
</div>
) : (
<AssetsTable assets={ assets }/>
)}
<SocialMediaFooter />
</section>
</div>
)
}
}
export default connect(mapStateToProps, null)(Portfolio)
推荐答案
对于错误消息,您需要确保对连接的组件的测试可以实际访问商店实例.因此,在测试代码中,您还应该使用<Provider store={store}><ConnectedPortfolio /></Provider>
或<ConnectedPortfolio store={store} />
.或者,您可以分别导出普通的Portfolio
组件并进行测试,而不是连接的版本.
Per the error message, you need to make sure that tests for a connected component can actually access a store instance. So, in your test code, you should also use <Provider store={store}><ConnectedPortfolio /></Provider>
, or <ConnectedPortfolio store={store} />
. Or, you can export your plain Portfolio
component separately, and test that, not the connected version.
有关详细信息,请参见有关测试的Redux文档,以及 Redux测试方法中的文章在我的反应/Redux链接列表中.
See the Redux docs on testing for more info, as well as the articles on Redux testing approaches in my React/Redux links list.
这篇关于JestJS->不变违规:无法找到“存储"在"Connect(Portfolio)"的上下文中或在其道具中的意思是:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!