加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – JestJS – > Invariant Violation:无法在“Conne

发布时间:2020-12-15 20:13:04 所属栏目:百科 来源:网络整理
导读:完整的错误消息: 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)”. 我不确定为什么我
完整的错误消息:

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测试中收到此错误,因为我的应用程序正在运行,我可以通过调度操作更改我的状态.

index.js

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组件,并测试该组件,而不是连接的版本.

有关详细信息,请参阅Redux docs on testing,以及React/Redux links list中Redux testing approaches的文章.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读